jscholes
commented
4 years ago @benetechMatt Thanks for providing a clear explanation row by row. Here are some suggestions:
Back Button
Instead of the current "all problems" link in the top left, we'd suggest using a back button more in line with what users expect on a phone. For example, on iOS, the sort of back button design you see in the top left-hand corner of a native app (a vertically elongated less-than sign). This can also be in place on Android, but the Back button in the bar at the bottom of the screen should also be functional and not take users out of MathShare altogether.
This is about reducing cognitive load. The more recognisable and predictable we can make user interface elements, the better. It also helps VoiceOver users, who have a better chance of landing their finger on the back button when they need it. The button could still have an accessible label of "Back to All Problems".
TTS Button Purpose
The current design of the TTS button, with the speaker icon, may not make its purpose immediately obvious. We'd suggest wrapping it in a rounded bounding box to make its status as an interactive control apparent, and adding some text to solidify user understanding. Remember that any accessible label for an interactive control must be a superset of the visually displayed text. So you can't have on-screen text of "Speak" and an accessible label of "TTS", for example.
"Editing Step" Text
This could visually stand out more as a heading. For example, consider at least enlarging the text, but other treatments such as bolding and a colour change (as long as minimum contrast requirements are met) could also be helpful.
For a screen reader user, heading mark-up is the way to go, with a level which fits into the hierarchy of the other page content.
Undo/Redo Mechanism
The placement of the undo and redo buttons doesn't make it clear what will be affected when they are activated. On a desktop browser, pressing Control+Z would presumably have an impact in both the equation editing box and the input to explain the work. But here, the buttons are located apart from any particular control. What should they do?
In addition, it may be helpful to include icons for undo and redo which users will find recognisable from other software.
Visual Separation of Inputs
The equation and explanation inputs are fairly close together, with virtually nothing to separate them or make their distinctive purposes clear. Padding could help here, as well as some label text. It would also be helpful to add some descriptive text underneath the explanation input, to help users determine what they should use it for. And of course, an accessible label for all inputs is a requirement for screen reader users.
Note: if the undo/redo buttons apply to the equation editor, re-positioning them between the equation and explanation inputs would also help in separating the two controls. It would also make the next step button stand out more, as a key actionable control for students once they've finished a step.
Other
- The text "saved" (top right) doesn't have an upper case S. This makes it inconsistent with other UI elements in MathShare.
bpmcneilly
Editing a step takes up the entire screen on small devices. the math tools editor at the bottom is setup as tabs. Selecting the explain your work text box brings up the devices native keyboard. The TTS button at the top will read out the equation and explanation to students. Selecting the "next step" button saves the current step and allows them to start the next one.