{"id":2505,"date":"2025-06-30T08:02:45","date_gmt":"2025-06-30T12:02:45","guid":{"rendered":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/?p=2505"},"modified":"2025-07-01T15:08:30","modified_gmt":"2025-07-01T19:08:30","slug":"designing-the-new-figure-toolstrip-around-user-experience","status":"publish","type":"post","link":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/2025\/06\/30\/designing-the-new-figure-toolstrip-around-user-experience\/","title":{"rendered":"Designing the New Figure Toolstrip Around User Experience"},"content":{"rendered":"\n\n\n
\"Travis<\/td>\nGuest Writer: Travis Roderick<\/a>
\n<\/strong><\/p>\n

Travis joined MathWorks in 2013, bringing experience from previous roles in software development across the healthcare, finance, and storage network industries. He earned a BA in Computer Science in 2001, followed by a master\u2019s degree where he explored the intersection of technology and creativity\u2014using probabilistic genetic algorithms to generate music for his thesis. Although he enjoys the challenges of coding, Travis is most passionate about solving user experience problems. He\u2019s particularly interested in uncovering the gap between how software is designed to be used and how people actually use it\u2014insights that often lead to meaningful improvements. At GAAB (Graphics and App Building), he finds the ideal environment to explore these dynamics and help shape better user experiences for all.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Whether you're plotting a basic line chart or creating an entirely new visualization from primitive graphics objects, your graphics appear in a figure window. Despite its importance, the figure interface has barely changed since the 1990s, still built around the same menus and toolbars shown in the image below.<\/p>\n

Meanwhile, the rest of the MATLAB desktop has evolved. Open a Live Script, and you'll see a modern, streamlined toolstrip featuring labeled actions arranged into tabs that match common workflows and improve discoverability. This contrast made one thing clear: it was time for figures to catch up.<\/p>\n

Timeline of figure toolbar changes
\n\"Timeline<\/p>\n

A User-Centered Redesign<\/h2>\n

Redesigning the figure UI was a daunting task. We knew we couldn\u2019t simply port menu items into a toolstrip and call it a day. \u2014we tried, but our internal review process challenged us to aim higher. Instead, we saw an opportunity to rethink the interactive figure experience from the ground up, focusing on user workflows. What followed was a collaborative journey involving UX (User Experience) researchers, developers, and\u2014most importantly\u2014our users.<\/p>\n

Together with our UX team, we kicked off a series of user interviews. Our first conversations were with experienced MATLAB users. We observed their workflows: analyzing data, tweaking algorithms, and visualizing results. One pattern stood out immediately\u2014their workflows were almost entirely programmatic. They wrote code, generated plots, adjusted the code, and repeated the process, all in scripts or from the command window.<\/p>\n

So we asked our participants: why not use the interactive figure features?<\/p>\n

Their answer was consistent. Paraphrased: \"If I make changes interactively using the UI, I can\u2019t reuse those changes. I have to repeat those steps manually every time I replot my data. It\u2019s just wasted effort.<\/em>\"<\/p>\n

That insight sparked a major shift in our thinking. What if using the UI didn\u2019t mean sacrificing reproducibility? What if we could provide users with code that reproduces the results of interactive gestures?<\/strong><\/p>\n

<\/h2>\n

The Introduction of Interactive Code Generation<\/h2>\n

With the idea of interactive code generation in hand, we built a prototype and shared it internally. The response from colleagues across MathWorks was encouraging\u2014but we needed to know what users thought.<\/p>\n

So, we put together a live demo and brought it to the MathWorks Advisory Board (MAB<\/a>), a group of professionals from various industries who provide early feedback on new features. Presenting an unfinished UI to seasoned users was a nerve-wracking experience.<\/p>\n

But once they saw what we were working on, the reaction was overwhelmingly positive.\u00a0The idea that you could interactively edit a plot and get the equivalent code was exactly the kind of workflow boost users were looking for.<\/strong>\u00a0That early validation gave us the confidence to move forward.<\/p>\n

When iterating on the code generation design, we knew it had to be easily discoverable, but it also had to stay out of the way when it's not needed. This is why the \u201cShow Code<\/strong>\u201d button on the FIGURE toolstrip tab is unchecked by default--the generated code only appears when the checkbox is selected.<\/p>\n

\"\"

Code generation demonstration<\/p><\/div><\/p>\n

In the Code Generation panel that appears, click the \u201cCopy<\/strong>\u201d button to grab the code needed to reproduce your figure.<\/p>\n

\"\"

How to copy auto-generated code<\/p><\/div><\/p>\n

<\/h2>\n

Iterating with User Feedback<\/h2>\n

We initially released the updated figure design in MATLAB Online and in our beta desktop so that we could receive customer feedback to steer our iterations. After this first round of feedback, we worked closely with our UX partners to keep the momentum going. We ran regular usability sessions with MATLAB users\u2014demoing changes, collecting feedback, and refining the design. Each cycle was hands-on: we would tweak the design, assemble a new demo, bring in users for test sessions, process their feedback, share it with stakeholders, and then repeat the process. This continuous feedback loop was essential in shaping an interface that felt intuitive, helpful, and supportive of the intended workflows.<\/p>\n

<\/h2>\n

Integrating the Toolstrip into the New Figure Ecosystem<\/h2>\n

The figure ecosystem is the term we use to describe the way figures are presented and the supporting UI around them. With figures at the center in the image below, the new ecosystem includes the toolstrip (1<\/strong>), the new tabbed layout (2<\/strong>), side panels for UIs like the Property Inspector (3<\/strong>) and the interactively generated code (4<\/strong>). So, the new figure toolstrip is a part of a broader redesign of the figure ecosystem. While I focused on designing the figure toolstrip and reproducible interactive workflows, my colleague Brian Knolhoff tackled other critical features of the figure ecosystem\u2014specifically, introducing a new tabbed layout. You can read more about his work in his article Introducing the Tabbed Figure Container<\/a>.<\/p>\n

\"\"

Components of the figure ecosystem<\/p><\/div><\/p>\n

Contextual Placement of the Figure Toolstrip<\/h2>\n

The figure toolstrip adapts to its environment so it stays accessible without getting in the way. By default, when a figure is first created, it appears in an undocked figure container with the toolstrip displayed at the top.<\/p>\n

\"\"

Figure toolstrip when the figure container is undocked<\/p><\/div><\/p>\n

When the figure container is docked into the MATLAB desktop, the toolstrip becomes one of the available tabs in the MATLAB Desktop when the figure is selected.<\/p>\n

\"\"

Figure toolstrip when the figure container is docked to the desktop<\/p><\/div><\/p>\n

When a figure is undocked from the figure container, the toolstrip moves to the top of the figure window and is collapsed by default to preserve figure space.<\/p>\n

\"\"

Figure toolstrip when the figure window is undocked from the figure container<\/p><\/div><\/p>\n

The toolstrip responds dynamically to changes to figure content or selection. The first Figure tab<\/strong> allows you to easily insert items to the figure or plot like legends and labels. The Format tab<\/strong> allows you to activate editing mode to modify the properties of your graphics objects in the figure.\u00a0 The Tools tab<\/strong> provides an entry point for helper apps, like Basic Fitting. You\u2019ll also find the Camera Tools there for 3D graphics. Finally, the Layout tab <\/strong>contains controls to quickly change between a grid view of your tabbed figures and the traditional single tab view.<\/p>\n

\"\"

Figure toolstrip tabs<\/p><\/div><\/p>\n

<\/h2>\n

Try It and Share Your Feedback<\/h2>\n

We encourage you to explore the new figure toolstrip and interactive features. Try out controls that are unfamiliar to you, experiment with customizing your visualizations interactively, and take advantage of the code generator to reduce trial-and-error associated with programmatic approaches. As you discover new ways to work with figures, let us know what\u2019s working well and where we can improve<\/strong> by replying directly to this article or by using the feedback button in the R2025a MATLAB desktop.<\/p>\n

\"\"<\/p>\n

Help Shape the Future of MATLAB🔬<\/h2>\n
Much of what we build is inspired by how you use our products. If you'd like to help guide future development, consider becoming a UX research participant.\u00a0Sign up here.<\/a><\/div>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

\"\"<\/div>\n

Guest Writer: Travis Roderick<\/p>\n

Travis joined MathWorks in 2013, bringing experience from previous roles in software development across the healthcare, finance, and storage network industries. He... read more >><\/a><\/p>\n","protected":false},"author":198,"featured_media":2931,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11,2,20],"tags":[],"_links":{"self":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/2505"}],"collection":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/users\/198"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/comments?post=2505"}],"version-history":[{"count":54,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/2505\/revisions"}],"predecessor-version":[{"id":2945,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/posts\/2505\/revisions\/2945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/media\/2931"}],"wp:attachment":[{"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/media?parent=2505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/categories?post=2505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.mathworks.com\/graphics-and-apps\/wp-json\/wp\/v2\/tags?post=2505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}