February 15, 2016 - Comments Off on Thinking About Accessible UI Animation
I basically have given myself 2 weeks to work out my mobile mockups. The way I intend to go about this is to do quick sketches if needed to help myself visualize the identity applied to the UI concepts and information flow I worked out last semester. Here's some examples of what I did for the home screen and menu right before starting to lay it out in Sketch.
I've also been working on how the animation for the menu items is going to work.
Making the design decisions associated with the motion has been done with accessibility in mind. since I started this project, I've been looking out for resources on motion design for UI and its relationship to accessibility. One of the best resources ob this topic along with good explanation can be found in Val Head's A List Apart article on the subject (she also put out a great list of resources about it!). She explains the issues with current UI design trends (parallax, scroll jacking, etc.) and provides examples in how the implementation of these motion effects could be problematic for the user experience of people with disorders that result in motion sensitivity (vestibular disorders, vertigo, dizziness, migraines...).
There are also suggestions in the article about how we can create meaningful UI animation that contributes to the users experience. In terms of accessibility, it is very important to keep the animation consistent, and make the user feel like the animation that takes place is logical and does what they expect. In my example above, all my transitions make sense in that they are chronological and logical. If the user opens the menu, it slides in from the right, and if you close it it slides away back to where it came from. If you try to visit the add a point screen, you will be advanced to the next screen on the right via a slide animation, and when you want to return to the map, it will reverse the way you slid in. I intend to continue to follow this concept through all my screen transitions.
I'm going to avoid any automatic animation. The user should be in control of when things start moving around. Animations should also not go on for more than 5 seconds according to WCAG Guidelines, unless there is a way for them to be paused. I don't think there's any real need for this kind of animation for what I am making, but I felt it was worth mentioning.