What are Object States?
Object states give you the ability to assign various “states” to an element on the canvas. So for example, you can tell Ceros that you’d like your shapes and images to look one way by default, but a different way when you hover over or click on the object. With object states, you can easily change things like location, opacity, size, rotation, image effects (brightness, hue, saturation, etc.), and color of an object when a user interacts in a certain way.
Why use Object States?
Traditionally, if you wanted an object in Ceros to transform upon a user interaction, the process would be a bit different. You’d need to copy the object, apply the visual transformation to the copy, turn off the visibility of the copy, and use an interaction to say “on hover – show – duplicate object”. Not the most straight-forward process. You can of course still follow this workflow if you’d like, but we wanted to make things a bit easier. Using Object States will eliminate the need for almost all of these steps! Keep reading to find out how object states can speed up your workflow.
- Select the element that you’d like to transform upon a hover or click interaction. This can be a jpeg, png, svg, an in-studio shape, or a text box.
- Navigate to the Design tab and click the plus sign next to ‘States’.
- “Default” is the default state of the object. This will dictate how the object looks on the canvas without any user interaction.
- In the dropdown you’ll see options for “Hover”, “Click”, or “Add New State.”
- Hover- If you select hover from the dropdown and apply changes to the object’s attributes, this will impact what happens when a user hovers over that object. This allows you to make subtle design changes without requiring an entirely new layer.
- Click- If you select click from the dropdown and apply changes to the object’s attributes, this will impact what happens when a user clicks on that object. Keep in mind, this state change will be applied and stay visible once a user clicks similar to how an “on-click-show” interaction currently works.
- Add New State- This enables you to apply multiple states to the object that you can then target from a different object or hotspot. Instead of being labeled as “Hover” or “Click”, these are labeled more generally as State 1, State 2, etc. Since they are not triggered by hover or click interactions, you are also free to trigger these using On View interactions. These states can then be triggered by “On Click/On Hover/On View- Change Target State” interactions. Pro-tip: You can rename these states something more specific by clicking on the little pencil icon next to the state in the drop-down—this can be a very helpful best practice for staying organized when working with a lot of states.
Please note: if you’d like to layer additional interactions on an object (think, a CTA that changes color on hover and then links to an external site on click) you can either apply multiple interactions directly to the object or group, or use a hotspot over the element to add the additional interactions. Just ensure that if you choose to use a hotspot, that the hotspot also targets your object states, otherwise it would cover up your ability to activate the state.
Wait…so when should I be using a hotspot??
While it’s perfectly acceptable to apply interactions and states directly to an object or group of objects, there are a few instances when using a hotspot could result in a better experience. And while this is by no means an exhaustive list, we’ve outlined a few of those potential cases below.
- You’ve always used hotspots to trigger your interactions and you feel more comfortable doing it this way. That’s totally fine! You can use hotspots to trigger the object state change and layer any additional interactions onto the hotspot as well.
- You need to increase the clickable area of an object. This one you can actually achieve this in one of two ways. You can use a hotspot like we’ve outlined above to trigger both the object state and the interaction. Or, you can place the hotspot within your group (increasing the clickable area of that group) and then apply the Object State to the elements within the group, and the interaction directly to the group. Be sure to toggle “Use group as trigger”. See below for more information on Groups and Object States.
- You want to clearly distinguish which layers in your layers panel have interactions applied to them. Unless you rename your layers, there is no clear way to indicate from your layers panel which assets have a state or interaction applied to them. So if maintaining the ability to easily scan your layers panel to find interactions and states is a priority, we suggest you use hotspots to target both.
Known limitations with object states in accessible experiences
Since object states is one of our newest features, we haven’t yet been able to completely vet its level of compliance with WCAG 2.0 Level AA requirements. While our team is actively working through identifying and rectifying any known limitations, we recommend you conduct your own accessibility testing with scanning tools, keyboard navigation, and screen readers to determine if your content meets your compliance criteria.
Below we have outlined a number of currently known limitations in regards to object states and accessibility. We will continue to add to this post as more limitations are identified or rectified.
Objects with Hover States
Currently, if an object has both a hover state and a click interaction, keyboard navigation (tab/enter) will not trigger the click interaction. To rectify this, consider revealing the hover portion by using a basic “On Hover + Show” interaction. Finally, ensure that the trigger and target are within the same parent group so that the content can be read out by screen readers.
Currently, object states can not be triggered through keyboard navigation. For example, if a object has a click and/or a hover state applied to it, the user will not be able to uncover those states with keyboard navigation. As we suggested in the previous example, consider creating these effects using a basic “On hover/click + show” interaction.
Setting up an interaction to reduce motion currently only applies to animations, not to object state transitions. To ensure the user is able to reduce any motion graphics, consider removing the transition, and applying an animation directly to the object.
As we uncover additional limitations or work-arounds we will be sure to post them here. In the meantime, if you have any further questions about using object states with accessible experiences, feel free to ping our support team, or take a look at our accessibility best practices article.
Was this helpful?