General keyboard dialog look and feel (consolidation)

[terracoda]

We have made excellent progress in shortening the words, and making the dialog look and feel much more compact. And finally, we are considering moving the icons to the left, but still using the brief text.

Goal: To quickly finalize a layout that hopefully looks and sounds similar for both visual and non-visual users.

In this issue, we can see a designs for more sims all together. Starting with RIAW and BASE.

Please add sims if I missed any.

• RIAW & OL
• MAL
• Friction
• BASE
• JT (on re-deployment)

Adding: May be related to https://github.com/phetsims/scenery-phet/issues/343#issuecomment-345104338

[terracoda]

Here's a DRAFT RIAW with key icons fronted

Adding the final version with the words fronted for comparison. I see we need to split the arrow keys in the fronted version and change the verb.

[terracoda]

@arouinfar, when you get a chance, can you adjust the fronted version to include the split/paired arrow keys and change the verb. In our haste, we used a previous version of the dialog?

It will read like this visually: [Left][Right] or [Up][Down] adjust sliders

[Shift]+[Left][Right] or [Shift]+[Left][Right] adjust in smaller steps

[Pd Up][Pg Down] adjust in larger steps

[Home] jumps to minimum [End] jumps to maximum

[terracoda]

Just posting the other dialogs now for comparison and completion.

MAL is next priority MAL is in RC Testing (https://github.com/phetsims/molecules-and-light/issues/160)

It looks like the only difference is the Group Navigation item. [Left][Right] or [Up][Down] move between items in a group

Friction with words fronted Should be similar to BASE with the verb conjugation change. [Up][Left][Down][Right] or [W][A][S][D] move book.

[Shift]+[Up][Left][Down][Right] or [Shift]+[W][A][S][D] move in smaller steps

DRAFT BASE with fronted keys Already discussed conjugating the verb, so it reads like a sentence.

[jessegreenberg]

@terracoda could you please describe the benefits of putting the icons first? In https://github.com/phetsims/balloons-and-static-electricity/issues/320#issuecomment-345303515 @arouinfar said

I think fore-fronting the text has a few advantages

• The dialog is easier to skim with the text left-aligned. Users can quickly scan the dialog for a command they are looking for, then look at the corresponding key icon(s).
• Screen reader users will hear the content ordered as [Command] [Key(s)], so it's nice (though I realize not necessary) to keep the same visual ordering.
• Overall, the content looks cleaner (IMO)

[terracoda]

@jessegreenberg, yes, and @emily-phet just commented, too in https://github.com/phetsims/balloons-and-static-electricity/issues/320#issuecomment-345346935

I think both the key presses and the described actions are important. I don't have a good argument for switching. I just want to make sure we are making the correct choice both visually and non-visually.

I agree with what @arouinfar said. I don't actually know if users scan for described actions or scan for key icons and then just try it out.

[jessegreenberg]

In https://github.com/phetsims/balloons-and-static-electricity/issues/320 @emily-phet said

@terracoda @arouinfar I just asked around to some folks who hadn't seen this before. It does seem that the text left/image right seems to be more understandable. @arouinfar can you make a quick version where the text is to the left, and the images are on the right, but the images are right aligned?

One concern I have is that when the text is translated, we could run into layout issues with having images placed based on the location of the last word in the string. If it worked to have the images right aligned and the text left aligned, I think that might end up being better.

[jessegreenberg]

For reference, here is what a dialog might look like when translated:

[arouinfar]

@jessegreenberg I had a conversation with @terracoda about the ordering on Friday, and the rebuttals to my points were something like this:

The dialog is easier to skim with the text left-aligned. Users can quickly scan the dialog for a command they are looking for, then look at the corresponding key icon(s).

This is a bit of a chicken-vs-the-egg argument. We have found keyboard shortcut dialogs ordered both ways, and it's not clear if users expect to see the keys or commands first.

Screen reader users will hear the content ordered as [Command] [Key(s)], so it's nice (though I realize not necessary) to keep the same visual ordering.

It sounds like the screen reader content was designed to match the ordering of the dialog, so this could be flipped.

Overall, the content looks cleaner (IMO)

Still agree, but my opinion may change after mocking up the other options suggested in this issue.

@emily-phet raised some excellent points, however.

I just asked around to some folks who hadn't seen this before. It does seem that the text left/image right seems to be more understandable. @arouinfar can you make a quick version where the text is to the left, and the images are on the right, but the images are right aligned? One concern I have is that when the text is translated, we could run into layout issues with having images placed based on the location of the last word in the string. If it worked to have the images right aligned and the text left aligned, I think that might end up being better.

I will mock this up, as well as the variations requested by @terracoda.

[arouinfar]

@terracoda so sorry I mocked the new layout with outdated content! Here's the mockup requested in https://github.com/phetsims/a11y-research/issues/62#issuecomment-345322041. With this layout, I think the [Shift]+[Left][Right] or [Shift]+[Up][Down] commands are harder to interpret. The orphaned "or" makes things a bit awkward too. Moving "adjust in smaller steps" to the first line isn't ideal, either.

Here's a mockup following @emily-phet's suggestion to left-align the text and right-align the icons. I added an extra 10 px of padding between the command and key icons on the longest lines (page up/page down and shift+tab), and then right-aligned the key icons. Once again, the "or" is problematic. Right-aligning the "or" breaks things up a bit (top), so I think it looks a bit better to instead align the icons and allow the "or" to creep further right (bottom). This approach has quite a bit of trapped space between the commands and key icons, and I'm not convinced that this facilitates readability.

@jessegreenberg thanks for providing a screenshot of the current dialog with ?stringTest=double! I think the dialog is still quite readable. We could also allow the dialog to expand to a max width before scaling down the text.

After considering the alternative layouts, I am still most satisfied with the original text on the left, icons on the right approach. The alternative layouts mocked up here have readability issues when it comes to two-line commands and trapped space.

[jessegreenberg]

@arouinfar thanks so much for doing these mockups. After seeing these layouts I agree with your assessment and prefer our current layout with text on the left and icons on the right.

[terracoda]

Thanks @arouinfar. It's nice to have all these visual examples for comparison. I agree with you and @jessegreenberg. I think the order of the current approach (text for action on left and then key icons on the right) works best.

@emily-phet, do you have any thoughts to add?

[arouinfar]

Here are two left-aligned columns

[jessegreenberg]

Group decision on 11/21/17:

We really like https://github.com/phetsims/a11y-research/issues/62#issuecomment-346095040 mockup the best. It looks cleaner and makes it easier to scan for icons and text content. We will proceed with that approach, removing the colons from the text labels on the left.

[arouinfar]

Here's a mockup with the colons removed. There's a 30px buffer between the longest command string and the icons in each column.

[jessegreenberg]

Alright, I think this is done with the above commits. @terracoda @arouinfar @emily-phet @zepumph @amanda-phet could you please review the new look? Can be viewed on phettest, but here are some screenshots: RIAW:

Friction:

[arouinfar]

Looks good to me @jessegreenberg. Thanks!

[terracoda]

All looks good to me, too, @jessegreenberg.

[jessegreenberg]

Thanks everyone! I think we are ready to close and proceed with deployment of keyboard navigable sims.