Investigate relabeling of items in PhET Menus #12
Comments
|
This issue is related to #11. |
|
List of items can be viewed as tools and links:
Links
|
|
Testing MENU element
Grand Summary: |
|
@jessegreenberg, @jhung, @jobara would you guys like to chime in on this markup for the bar at the bottom of the sim. I left the sim title (H1) off as that is up at the top of the PDOM. Note that aria-activedescendent attribute is not working. I think I need some JS for that? The code over here: |
Yes, some script could update the aria-activedescendent id. But is it necessary in this case? Since each list item/button will be in the focus order, the AT will announce when it receives focus automatically. For the menu, why did you choose the For https://github.com/terracoda/phet-templates/blob/master/a11y-menu-template.html#L38-L49, what do you think about using a an ARIA menu button. I took it for a test drive in #13. |
|
@terracoda thanks for testing the menu in #12 (comment)! Have you tried the aria menu role in Safari with VO? |
|
@jessegreenberg, in general I think it looks pretty good. The only comments I have right now are:
|
|
@jessegreenberg, @jobara I was just focusing on the HTML I will now test the I agree for aria roles that the @jobara as for using the more semantic I added some questions to the initial post in the issue. I've mixed up the 2 issues #11 and #12. Originally, I thought I would work out the code in #11, and the content in #12, but they are tightly related :-) |
|
@terracoda I like the reorganization in your drawing above, though I'm not sure about your headings. Perhaps we can implement without the headings, and just have a horizontal line seperating the links from the buttons? I'm just a little concerned that the headings may be more confusing than helpful for those visually accessing the menu. |
|
@emily-phet, I actually missed one item (Check for Updates). I agree, too. I don't think I like the headings. Also wondering if "Report a Problem" can be shortened to "Report Problem." How's this one and this order? I moved "Report a Problem" up. |
|
@emily-phet, I was also thinking that instead of headings, non-visual help text could be "Tools and links for this sim." This text would be associated with the "PhET Menu" button, kind of like this:
|
|
@emily-phet, notice that if read out together, they sound nice. |
|
@emily-phet, also don't think we need help text for every item.
Then the actual menu
Note: Edited list content to removed the indefinite articles (a's) in 2 items. |
|
@jessegreenberg and @jobara, I guess the code discussion can continue over in #13, I didn't realize @jessegreenberg was also working on this :-) It was a useful exercise to check the HTML elements since one should use HTML if it natively does what ARIA is supposed to add on. |
|
@terracoda that looks good, I like the possibility of icons. Why did you move report a problem up? I thought one of the confusing parts of the menu was that the buttons and links were not collected together. |
|
@jessegreenberg, @terracoda: @jobara and I just did a quick informal test of the menu with a colleague and here's what we found:
|
|
@jessegreenberg, I moved the "Report a Problem" up to group things by relevance to the sim rather than by function (i.e., button or link). The "Report a Problem" item is relevant to the sim. The last item in the sim relevant-section is the About. The only item that really doesn't have anything to do with the sim is the link to the PhET website, so that was moved into its own section on the menu. Make sense? |
|
That makes total sense, thanks for clarifying @terracoda. |
|
@jhung that list is very helpful, thank you! It lists several of the confusing aspects of the current menu. I think all of these points should be made into issues and considered. To respond to a few of these issues:
Very true, our dialogs are quite inconsistent throughout the project. Some work is being done now to normalize our dialogs.
Yes, that is what it does. Teachers requested that sims have this feature so that downloaded versions can check for updated versions on the website. This is useful when internet may not be available during class hours.
This is another feature for teachers. When using a projector in a classroom, colors can look washed out so it changes the color profile so that sims an be easily seen on a projector.
We wanted a general place for options for all sims. In some sims there is only one option, but others have more than one, and this is where new global sim options could be placed in the future. |
|
@jhung thanks for the list about the individual items. That is indeed very helpful :-) It's all related of course to making the labels clear, but maybe the design changes for the actual modals we should probably put in a separate issue. I agree that they should be consistent and each contain a close button. As for clarity of labels do you think that the labels could be made more clear with help text like the text I suggested at the beginning of this issue? Or do you think that a general help text for the menu alone would help prepare users for what is in the menu. For example, "Tools and links for this sim" as I suggested above? I was hoping that small tweaks to the labels and perhaps the addition of icons could render the individual button help text irrelevant. @jessegreenberg, thanks for the clarification on each of @jhung's items. |
|
@terracoda - Thoughts:
|
|
Regarding some of @jhung comments:
@jessegreenberg - can all the dialogs that we're working on for the PhET menu have an "X" to close? I think this is better for usability, but also the PhET version of the X to close is playful, and keeping the dialogs friendly can be help keep little kiddos who happen upon these options from feeling like they've done something wrong. (the classic windows error message look can freak out little kids)
I'd like to have a sentence with some clarifying information in smaller text under this option. Needs to concisely and in a friendly way convey:
Good catch! I haven't heard of this being a problem (e.g., no issues to phethelp mentioning this). I think the options on the screen are "screen specific" options, while in the phet menu are "sim specific" options. Not sure if this is clear to everyone, though. From my experience with students, they don't really attend to the (visual) headings of the menus, and when we create descriptions for sims with menus labeled as "options", we can create a more specific label. |
|
@emily-phet, glad you like it. That would be great if someone else could do the actual artwork. I was not sure if the PhET Website link needs an icon. I was thinking that the little paper air plane would do if the designer thinks an icon is necessary. I left off the dot dot dots because all the other ones like that go to a modal dialog in the same app. The PhET link goes somewhere else entirely. |
|
I made an issue for artwork in phetsims/tasks/issue#752 (not sure how to reference issues in other repos). |
|
@emily-phet, I think just using the full URL will work: |
Suggest shortening to: The label would be read out as something like: Adding: Trying to make it clear what "Projector Mode" actually does in the help text. |
@terracoda @emily-phet this isn't technically true, black might switch to white, but it also might just make some other colors brighter or a different color entirely.
Yes, they can have a close button. Here is the design document which shows what it will look like. https://docs.google.com/document/d/19h0U5iqeChirUvVRaudUbmSP_J3yMn7FgnILWrUq9-c/edit |
|
@emily-phet, @jessegreenberg, the sim version is stated in the About this Sim dialog (as mentioned in #12 (comment)), so it makes perfect sense to move Check Sim Version (or Check for Updates) to be next to About this Sim. It could even go below it with some indentation, unless there is a reason for not nesting the menu items.
And since, the Check for Updates dialog does actually check for updates (#12 (comment)), would the item's placement in the menu be enough to clarify its function addressing @jhung's concern in #12 (comment), and thus also minimizing the impact on translation? See four possible versions below (changed items italicized). V1: Change label and change in position to above About
Visual separation here
V2: Change in label and change in position to below About
Visual separation here
V3: NO change in label, and change in position to above About
Visual separation here
V4: NO change in label, and change in position to below About
Visual separation here
|
|
@terracoda Thanks for the suggestions! While I agree that moving the "Check for Updates" into the "About this Sim" dialog, @ariel-phet thought this would require infrastructure changes (maybe in Joist?) that we don't have the resources for at the moment. Does this sound right to you @jessegreenberg? |
Not too much, it is pretty straight forward with the current implementation. But this would take more work than just reordering, which would be trivial. We would need to decide what the new button would look like and how it would replace the link that is in the dialog now. But there is another advantage to having the "Check for Updates..." button in the menu, which is that it is very easy to find. When the sim is out of date the button turns green with the hamburger/three dot icon, making the reasoning behind the bright button color obvious:
I agree, the desired effect makes sense, but it seems unusual to have an indented button in this list. |
Just checking other menu systems, it looks like Firefox takes this approach while Chrome is more verbose with things like "a", "an" and "the". |
|
@terracoda I like V3 in #12 (comment)! |
|
@jessegreenberg, @emily-phet, I wasn't suggesting we move Check for Updates into the About this Sim dialog. The versioning information is already stated there, so moving the item next to the About this Sim item makes good sense. Indentation makes a parent-child relationship between the items more clear, but that seems unnecessary here! The menu is a handy list of tools, and a place to get more information about the sim. @jessegreenberg, thanks for the added information about how the menu item works. I hadn't seen the green highlighting before. I was actually wondering if the menu item should be more dynamic to let the users know that an update is available. As you have demonstrated, it already does this, but it uses color alone to communicate the message. Has the design team considered coupling the color change with the warning icon? This would be more compliant with WCAG's success criteria 1.4.1 Use of Color . The icon would require a description (or alt text of some kind) for the non-visual environment which would affect translation, but would not immediately affect any translation in the visual mode. @emily-phet and @jessegreenberg, what do you think of this idea? And for the record, I also prefer version 3 which is what @emily-phet originally suggested. I like having the About this Sim item last. I think we are all in agreement for the ordering and wording. |
|
@jessegreenberg, thanks for checking different browsers on their use of definite and indefinite articles. There are many instances where definite and indefinite articles are required for clear meaning, but menu items and headlines often do fine without them language change. This change in the English version of PhET Sims does not necessarily have an effect on translated versions. Individual languages handle this in their own way. I think we should be consistent, so if there is agreement to remove them, we should be consistent about their removal, and check to see where this may impact translation. |
|
@terracoda @jessegreenberg
Everything left aligned, no indentation. (note to @terracoda - my understanding is that when changes are made, a notification is sent to our group of trusted translators to address these changes...so even if no change is needed in the translation the volunteers would need to take a look. I don't think this is a problem as long as we only do this once - for the foreseeable future - for the PhET menu.)
Are there any other remaining questions in this issue? |
|
@emily-phet, I think your summary is good. I think it is worth considering 2 icons for Check for Updates. Two icons would have a bigger impact on translation, and verbosity levels, as alt text would be needed for the icons. Two possible examples below: Example 1
Example 2
|
|
I think Example 1 keeps things simpler. If we consider two icons, we might also just want to use the label to describe the change directly, rather than using alt text. For example:
I am not suggesting we do this, but this approach is less verbose for non-visual users. |
|
@terracoda if we can (relatively quickly) come up with two icons that clearly indicate "up to date" and "not up to date", and it's relatively straightforward to implement a two-icon option for @jessegreenberg , I think we should go with this option. Going forward, our goal for work on these common areas of the sim is to ensure that these are accessible, and to try to make all the changes necessary for the foreseeable future at once (rather than leaving issues that will need to be addressed later). So no need to propose minimally accessible options. Also, if we do this well once, it's fine to have to update the translations, so since we're making at least one change that will require translation, we might as well not shy away from others that will improve the accessibility. So, no need to worry about minimizing translations at this point - we're already going to have to request translation updates so whether it's for two phrases or 10 isn't a huge difference. |
|
What do you all think of "Check version" vs. "Check for updates"? I like the idea of having an indicator much like that seen on smart phones. A simple circle with an up arrow may be enough? Or maybe an "!"? Like: http://plainicon.com/download-icons/54752/plainicon.com-54752-b2fe-64px.png |
|
@emily-phet, for consistency I think we can stick with the adapted Font-awesome icons that the simulations are already using, the green checkbox with a white check and the orange triangle with an exclamation which are based on the following 2 icons: @jhung, the links you posted go to 404 pages for me, so I can't see the icons you are suggesting. Perhaps they are similar to the Font-awesome icons? Also, @jhung, could you explain why you think the label Check for Updates needs to be changed? Changing the language on the outside menu item would require similar changes on the labels and text for the button and link text in the dialog as well. "Update" is commonly used to indicate a minor version change. |
|
@jhung, actually, the use of the word "version" comes first in both the dialogs (the Update dialog and the About the Sim dialog), so I agree using Check Version makes good sense. I wasn't fond of "Check Sim Version". "Check Version" is simpler and avoids repetition in the alt text for the icons. How's this?
|
|
@terracoda The icons I were thinking of was a circle with an up arrow (indicates an update available), or a circle with an "!" (the triangle seems more like a warning, whereas a circle is more like a note). @terracoda Re: "Check Version + icon" looks / sounds good to me! But I went and checked with people to see what they thought of "Check for Update" and you can see the responses here (starts at 12:14pm) https://botbot.me/freenode/fluid-design/2017-01-17/?msg=79502839&page=1 Seems like "Check for Updates" may be okay as is. |
|
@emily-phet, I think based on yesterday's (March 12) A11y meeting and the comments above that this is the final version of the content for the bottom bar and PhET Menu:
Then the actual menu items in the the PhET Menu
Visual separation here
Note there are 2 icons for Check for Updates
@jessegreenberg and @emily-phet, is this summary correct? |
|
@terracoda I sent an email yesterday to Ashley to get her feedback on "Keyboard Shortcuts" vs "Key Commands" or something else. Let's see if she responds some time today. I'll update here if/when I hear back. |
|
@emily-phet, OK, good. One thing I did not do until just now was actually look up the words (silly I didn't do this before the meeting). While there can be subtle differences depending in what platform one is using, the terms Hot Keys and Keyboard Shortcuts are pretty interchangeable. I was thinking narrowly about the meaning of Hot Keys and that they were specifically only custom key presses kike the ones in Balloons and Static Electricity. Let's see what Ashley has to say. What we I think we all agreed upon was that we did not need the word "Help." Keyboard Shortcut on Wiktionary |
|
This is an old issues. There is nothing to discuss here. Closing. |
Based on Dec 5 meeting with @emily-phet and @jessegreenberg regarding the accessibility of the Sim Navbar, it was suggested that several items be made into buttons and be relabeled with clearer text. We basically have a list of buttons (items that do things) and links (items that go places).
Current Menu Sample
Draft Order, Labels, and Text to Discuss
Questions
The text was updated successfully, but these errors were encountered: