search

benetech / MathShare

MIT License
9 stars 3 forks source link

Easily navigate steps on a small screen #983

Open benetechMatt opened 4 years ago

benetechMatt commented 4 years ago

mockup of mathshare steps on a phone. A top menu bar with a link to "all problems", work saved status, and user settings represented by a gear icon. Below this is the problem prompt and beginning equation with an orange background and white text. Steps begin below this. Step 1 has a TTS button on the left, then the step title and an ellipses "more options" button on the right side. The next row is the equation. The next row below that is the explanation. After the last step is a button "add step". When users select that they are taken to a new screen that gives them the step editor.

When users open a problem they can view the prompt and all steps completed for the problem by scrolling through them. At the bottom end of the steps is the button "add step" which allows them to add a step by taking them to the editing screen. Selecting the TTS button reads the step aloud to the student. Selecting the "more options" ellipses button on the right of each step allows them to edit or delete the step. Editing the step would take them to the editing screen.

jscholes commented 4 years ago

@benetechMatt Some of the comments/questions relating to #984 also apply here, along with the below.

More Options Button Purpose

The three hamburger-style dot icons for the "more options" control may not be clear to everyone, in terms of what the button will do when activated. Some text may be helpful here.

Also remember that on a screen with multiple controls which do the same thing but in a different context, their accessible labels must flag the context for each. For example, a button with an accessible label of "Speak" must say something like "Speak Step N".

Colour Contrast for Problem Explanation

The white explanation text on a caramel background doesn't meet the minimum 4.5:1 colour contrast ratio requirement for normal sized text. This will make it difficult for some users to see or read it, particularly for those with low vision, or for situation with low light or glare during sunny conditions.

We'd suggest darkening the background here. A shade of #C15807 would meet the minimum color contrast requirement, although we do recommend that the minimum be exceeded where possible.

benetechMatt commented 4 years ago

Updated the previous mockup based on feedback. Changes:

When speaking the steps, the edit button should be "edit step n"

updated mockup of phone screen

Questions:

  1. I was thinking the personalization settings menu should open in a new row due to the narrow screen. The button could stay in the same spot but settings open in a new row.
jscholes commented 4 years ago

CC @bpmcneilly - any further thoughts?

bpmcneilly commented 4 years ago

Looking at the mock-up, is there an intended difference between the white & off-white backgrounds? I'm not sure if that's intentional or not, because they're really similar in color, but it looks like the left side of the equations is white #ffffff while the other side is the standard background off-white #fcfcfc.