We are looking to gather some intelligence on the Infographic Component from legacy Evolve in order to develop something similar but better in New Evolve.
Please share your thoughts on Infographic - do you use it? What do you like about it or don’t like about it? Any suggestions for improvements?
Also if you have anything fun you have made in a course with an Infographic that it would be acceptable to share with us, DM me a link to the preview of your course so we can take a look.
All contributions will help us make the next generation of this type of interaction even better. Thanks!
I really like the Infographic component because it allows you to be creative with interactions. It’s very sandbox! Unfortunately, I don’t get to use it very often because it’s not accessible.
If the new version could make it accessible, that would be amazing!
I’ve spent some hours working on an infographic component a few times – it’s definitely a very useful concept, especially if I have a lot of chunks of information that would make for a very unappealing accordion or carousel. But every time I end up abandoning it partly, as gemz says, because of the accessibility issue, and also because it’s difficult to make it work well on mobile view.
If you could develop an accessible component that combines elements of infographic with hot graphic, it would definitely be one of my most used interactions. I’d like to see some out-of-the-box clickable items like you have in hot graphic, but also the ability to add text labels to clickable items, as you can in the infographic. Also the option to swap out an alternative graphic for mobile, or perhaps convert it to an accordion, and to cycle through regular popup dialogs as you can in the hot graphic. It’s always felt to me like they could be a single more robust component rather than the two we have that aren’t accessible.
I love the infographic component, and have made some really cool stuff with it such as custom menus and animated interactive elements. I’ve noticed a few bugs and also some things that would be really useful additions in my experience.
Bugs
The animations section can be quite buggy when it comes to the animation start and finish positions. I think the intended behaviour is that the default animation positions are the same as the objects current positions, but it often is just a seemingly random number which sends the objects flying across the screen when you add an animation to them!
The item list has no scroll function, so if you have a particularly busy infographic, it can be awkward to navigate through all your items easily.
Useful additions
It would be so useful to be able to have more options that just a rectangular item, especially when wanting to make items interactive. The option to add a graphic as an item, rather than having to set the graphic as the background of an item would be a great way to achieve this.
More customisation options for the text in items. At the moment you have to set one style per item, but it would be great if each item could have a title and body text, rather than having to make one item for the title and another for the body text.
I have used the infographic component a lot, but like others have said it’s no longer viable for client work as accessibility is paramount. It’s mostly the lack of text scalability that is the big failure there. Also seconding that the layers panel is pretty unusable when you get into multiple layers.
The ability to hide/show layers based on variables is extremely powerful, we’ve used it to create really complex interactions, with very stylized buttons and clickable hotspots. The “button” would be a background image with its own hover state. We can then use the hide/show variable to add a visited state, and even a “highlighted” state if we want to highlight certain parts of an interaction based on something like a confidence slider or MCQ pass/fail. It’d be great to have even more logic features inside the infographic.
I’m a big fan of the infographic, in the past we had often used it to create Map navigation systems and more visual complex menus as it can provide a rich experience, though similar to LaurynS have reduced its use due to accessibility concerns.
Variables/ Logic Triggers
Currently though we can use variables to show and hide elements within the infographic, we can’t use the infographic to effect the rest of the module.
It would be great to have trigger features inside the infographic so you could change variables from within the infographic, (rather than the existing setting it to complete on all interactive elements interacted with)
I.E if you select ‘Element A’ within the infographic you could then cascade that choice through the whole module, which if accessible would open up a whole world of possibilities
Duplicating elements
Also the offsetting element by (think) 50px on duplication is frustrating. Might just be me but I’m usually duplicating elements to have them shown/hidden with variables so would like them to be duplicated in the same place. Having to go through and remove the offset is quite time-consuming on complex infographics.
I’m also a fan of the infographic, and I would use it often enough in Legacy Evolve. I agree with others that it does need to be more accessible. We were able to use it in limited functions and make it accessible, so my request is to focus on these elements within the component to increase its accessibility.
Audio/video players in the pop-ups were flagged as inaccessible, so ensuring that the same video and audio player used for those components would mean we could add them back into infographics. Now that I remember, the branching scenario had the exact same issue. The media player was less accessible in the branching scenario than the video component.
Full screen icon doesn’t receive focus in the correct order, so improving that would help substantially.
Though you can set the focus order of elements in the infographic, it still wasn’t perfect and adding more control here would mean future accessibility audits wouldn’t flag WCAG Success Criteria 1.3.2 Meaningful Sequence.
For text added to infographic components we’re unable to easily add headings, and to control the heading order, so fixing that issue would mean that custom pop-ups could be created with headings that make logical sense.
Zoom currently isn’t supported on infographics, and also the content within them don’t scale if a learner increases the zoom on their browser. That means if we built an infographic with a lot of text, that text would always remain quite small and for learners that prefer to read text at 200% they would be disadvantaged. Fixing this issue would go a long way to allowing more flexibility in how an infographic is used.
If building an infographic where content is displayed incrementally, the focus order doesn’t update when the content is dynamically updated to reveal more content. This was a real issue in previous accessible courses, and meant we couldn’t create an infographic that would reveal more information with additional clicks. Similarly, when a button within an infographic is selected and more information is revealed, that information is not identified to screen readers, meaning they don’t know more information is now available for them to tab to.
A massive thank you to everyone who has contributed to this thread so far. It will certainly be helpful to us as we develop the New Evolve tools and functionality.
One more thought on this is that in a lot of cases I ended up using the Infographic component to replicate what a Hotgraphic does, purely because we needed to have a more custom look to the hotspots. So for me personally, improving the Hotgraphic component to allow us to upload custom images as the hotspots would be really helpful, including hover and selected states.
