UX Visualization Techniques Reduce Your Cognitive Load

It seems like every time you turn around, there’s a hot New York’s deliverable. First, we had site maps and wire frames. Now we have Jurnee maps and service blueprints and affinity diagrams. It can be overwhelming and hard to know if you need to jump on the bandwagon and use the latest and greatest visualization technique. Some of these methods look pretty complex, but at heart they are all different approaches to the same basic problem, getting information out of your head and into the world where you can see it and act on it. You strives to minimize cognitive load for our end users, because when people are trying to think about too many things at once, they make mistakes and overlook important information. But cognitive load limitations apply to designers just as much as they do to our end users.

This is why externalizing design information is so helpful. By getting concepts out where we can see them at a glance, we’re able to recognize and consider them without having to recall them from memory. This leaves more mental resources available for analysis and decision making. All of these visualization techniques reduce cognitive load, but none of them is a magic bullet that will solve every problem. They’re just templates that are well suited to certain types of UX challenges, whatever format it may take, make what you know, visible so that you’re better able to understand and act on it.

UX in Scrum

As a U.S. professional working in scrum, you may wonder if you need to attend each ceremony, what you can do to prepare and how you can participate. The answer is yes. You should attend each ceremony and I’ll outline what you can do to maintain open communication, influence product success and productively contribute to the scrum team. Now, most teams will have a daily meeting that’s called Stand Up or daily scrum. This should be a really short ceremony, usually no more than 15 minutes. And it should focus on opening up communication to ensure that work is on track and that any blockers are quickly resolved. Each member of the team, including X, should remain standing and concisely answer each of the following questions. What did you do yesterday? This is a good place to discuss any areas of the design that you worked on, outline any collaboration that happened and any research or data analysis that you did. What will you do today? So share what you plan to do related to design, research, reviews, planning or even facilitating workshops. Mention areas where you’d like input from the engineering team or your product owner, and invite team members to any upcoming research that’s happening. You also want to talk about what might be in your way. So bring up any internal or external factors that are blocking you from getting your work done. If you need to have specific discussions with team members, suggest a quick turnaround meeting right after the stand up. The next ceremony is backlog refinement, and this usually happens halfway through the current sprint. The goal of backlog refinement is to review backlog items to make sure that they’re ready for the upcoming sprint planning meeting and ultimately the sprint. You should make sure that their user stories are in the backlog or add new ones. You can also facilitate whiteboarding sessions or other lean workshop techniques just to help the team solve issues together. Your participation and backlog grooming can also bring foresight into what the development team will work on in the next sprint. It also provides additional support for the product owner if they need that from you. The next ceremony is Sprint planning, and this usually occurs on the very first day of the sprint. The goal of Sprint planning is to review your prioritized backlog items again and estimate their level of effort. U.S. involvement in Sprint planning is important because just like development work, you work should also be accounted for. An estimated in the backlog at the end of the Sprint planning meeting. The entire team should have an understanding of their workload and their goals for the Sprint Sprint Review or DEMO usually happens on the second to last day of the sprint. And this is a great opportunity for you to support the product owner by presenting completed work. It’s also a good place to review research and interject user centered insights that informed the current product iteration. The final ceremony is the retrospective and these often happen on the last day of the sprint. They’re intended for the team to review how things went during the sprint. Retro is also a great time for you to talk about process changes because the topic of this meeting is related to the team’s process. People will be more open to your suggestions, position your ideas as experiments to be tested during the next few sprints to keep things improving. At times, you may perceive these meetings as barriers to your productivity, but you should remain involved in all scrum ceremonies to stay engaged and aware of what’s going on with the rest of the scrum team.

UX Animations

Good, you animation’s feel natural, subtle and unobtrusive, they almost feel like the product is physical and responding to what the user is doing, not like a cartoon that’s been tacked on top. A big part of that is keeping them quick, keeping the motion subtle and making sure they have a real purpose for being there. First off, they should be very quick. UKCS animation should be between one hundred milliseconds and 500 milliseconds, and that’s an absolute maximum. Most of the time you don’t want them above 300 milliseconds or so. That’s really fast. It’s one tenth to a half of a second, which is much faster than most designers expect. And it might look rushed when you’re designing it and watching it over and over.

But remember, the longer an animation is, the more lag time the user experiences. That becomes really frustrating, especially on the second, third or fourth time that you see it. You want the interface to feel snappy and responsive. The general rule for timing is the further something has to move on screen and the more complex the animation, the more time you’re going to need for it to look natural. That means you should avoid big, exaggerated movement, especially on desktop, where you have a lot more ground to cover, more complex animations take more time and they tend to be more distracting.

So keep the transitions. Simple icons don’t need to dazzle users with a dance routine. A simple color change or pillow appearance is enough to signal that something’s been clicked. Avoid things bouncing back and forth and stretching like they’re made of rubber. You take the physical metaphor too literally. It feels cartoonish and woozy. You also want to use easing to make the timing feel natural. You want things to accelerate slightly when they first start moving and slow down a little bit before they come to rest. Things in the natural world don’t move at a perfectly linear rate. They speed up and down a little bit. So this box is moving linearly. It looks stilted and awkward. This one has a bit of easing applied at the beginning. In the end, doesn’t it look better? So a small amount of easing makes things move more naturally and it helps the users I track where something is moving. Finally, animations need to serve a purpose and they need to communicate something to users. Don’t just include them to try and delight or communicate personality that gets old quickly. They’re most useful for three reasons feeback discoverability and transitions. So when user feedback keep it subtle, clicking add to CART does need to show a product thumbnail image swing and a big arc across the screen into the shopping cart. Simple color change on the button and a little indicator on the cart are plenty to confirm that the system understood the users click. While you can use animation to draw attention to things that would otherwise be overlooked, don’t use animation to make up for weak signifiers. Showing an error notification sliding into view can be good because it helps users to notice it.

Having a dancing arrow icon on a page that has a false floor is bad. Just make the page look scrollable instead. Animations can also help with transitions because they can provide a visual metaphor for what’s happening. This goes beyond just a fancy loading indicator. You can use them to help communicate the type of transition that’s happening on the App Store here. When you click on an app card, it quickly morphs into a full screen overlay that helps to communicate that you’re looking at the same thing, just more detail. That window just appeared instantly. It wouldn’t be the end of the world. But the transition helps communicate the relationship between that full screen view and the card on the previous screen. It also subtly suggests that you can swipe to close it. That can help the user unconsciously build their mental model of how the system works.

Leave a comment

Your email address will not be published. Required fields are marked *