search

phetsims / tasks

General tasks for PhET that will be tracked on Github
MIT License
5 stars 2 forks source link

Need Icons for New Inclusive Features #1117

Closed terracoda closed 1 year ago

terracoda commented 1 year ago

We have a couple new features that we would like icons for:

We will also need a web filter for these features, but I think I will need to make an issue in a different repo for that.

Tagging @amanda-phet to help me, or to help me find someone who can help me.

terracoda commented 1 year ago

@amanda-phet, there is no design-help-wanted label.

terracoda commented 1 year ago

This is really bad, and I know it can't be colored, but this is what I can copy and paste together using Preview:

image
terracoda commented 1 year ago

And here is a fun-silly camera input idea:

image
terracoda commented 1 year ago

I searched font-awesome for the icons.

terracoda commented 1 year ago

@amanda-phet, timeline for this would be with the website. When you are ready to layout the new content for the Inclusive Design section.

brettfiedler commented 1 year ago

Updating to indicate we'll need the icons sooner for our videos which will be created before the website is updated.

Also, there is the potential for the Camera Input feature to have a "non-hands" variant. We should consider just a Camera Input icon that will be used for all sub-features.

edit: Assigning myself to update timeline next week.

terracoda commented 1 year ago

I realized yesterday that we also already have another inclusive feature:

This feature is meant for touch devices. The feature changes the focus-based navigation of the sim to use custom swipes and taps (very similar to iOS VoiceOver gestures) on touch devices.

We designed this feature so Jen Tennison (SLU Chrome Lab) could use teh Voicing feature and do studies with blind people using her haptic designs for JT and GFLB.

terracoda commented 1 year ago

Super rough concept draft, and we do NOT need this one right-away.

custom-gesture-draft
emily-phet commented 1 year ago

@mariahmaephet @amanda-phet

I just wanted to check in on this issue. It's part of our current iteration, but I'm not sure what the communication flow is. We are creating videos that will make use of these icons right now, so we do need these icons asap.

To reiterate the need - we need 3 icons total.

Also - assigning to @mariahmaephet so it's on her radar.

amanda-phet commented 1 year ago

My understanding is @mariahmaephet is working on these now (sorry I didn't state that in the issue, I had messaged her on slack).

I'll get in touch and figure out who is making the icons and get you drafts asap.

Question: There were some open questions about how we will fit up to 9 icons on a sim tile, and figuring out how to handle this growing set. Should we move ahead with just adding icons to the set, and figure out the website later?

brettfiedler commented 1 year ago

Should we move ahead with just adding icons to the set, and figure out the website later?

Yes, please. The icons are going into videos in the next week or so. We can figure out how they fit into the website after that.

mariahmaephet commented 1 year ago

Hey all!

So these are just based on the references you gave--we can tweak them however you'd like

Screen Shot 2023-03-16 at 2 44 53 PM
amanda-phet commented 1 year ago

@mariahmaephet can you make these look like the icons on this page? https://phet.colorado.edu/en/accessibility/prototypes

Basically in a rounded square with a very very simple shape, since these appear super small in some places.

mariahmaephet commented 1 year ago

@amanda-phet Like this? I'll round them out a bit to match the style

Screen Shot 2023-03-17 at 12 23 57 PM
terracoda commented 1 year ago

Wow. That was quick.

I am wondering what these icons mean to people?

amanda-phet commented 1 year ago

a11y-icons.ai.zip

@mariahmaephet here is the ai file with the other assets. Can you add these three to the file, match the weight/stroke of the white parts to match as best as you can, pick 3 new colors, and then share a screenshot of the entire collection?

It's possible we'll need to think about using similar colors for similar features because we will run out of different colors to use! Especially since these all need to be pretty saturated and dark. We're getting to the point where we might want one color for visual display, one for auditory display, and one for input. Thoughts @terracoda @emily-phet @BLFiedler ?

terracoda commented 1 year ago

I agree we are going to run out of colors - likely already have run out.

I started on a feature-relationship hierarchy somewhere? Looking for issue.

I think I was thinking of this issue where are discussing how to display the icons... https://github.com/phetsims/website-meteor/issues/517

mariahmaephet commented 1 year ago

How do these look? It's easy to change the background color, and I have a general swatch that I try to work off of if that gives you more ideas of colors.

Screen Shot 2023-03-17 at 1 38 16 PM Screen Shot 2023-03-17 at 1 38 20 PM
emily-phet commented 1 year ago

Commenting on @terracoda's previous comment: I had previously suggested color coding based on modality: like one color for all input options and different colors for Auditory and Visual features. There are lots of ways to slice this cake, and none will be perfect (there are times where features can/may overlap modalities). But maybe something like one color for each of these categories of features, and all features within that category have the same color:

I may be missing a feature, but I think you get the idea.

terracoda commented 1 year ago

@mariahmaephet thanks for turning my ideas into sharp-looking icons. The icons look really nice.

I have 2 questions for @emily-phet and @BLFiedler:

The next issue is color...as suggested by @emily-phet, I think it makes sense to reduce the number of colors by grouping the icons by modality or related features. How does this grouping feel?

terracoda commented 1 year ago

Regarding color and groups, I was thinking, we could use different "shades/ranges" of the main color for the items in the group, if people like that idea.

I think this will work even if the colors are not sufficiently distinct because we are not using color-alone to identify each feature. The color is meant to gently identify the groupings, but I do not think that is a required interpretation. I think the individual features are what is important to uniquely identify.

brettfiedler commented 1 year ago

Color:

re: Taliesin's idea in the past two posts: Let's give it a try! I think that could work. Frees us up to make more features in the future and not keep running into this issue too...

Imagery:

The Camera Input: Hands icon is a bit busy to me. Also, I wouldn't want folks to think we're tracking their face at all. I'd recommend removing the face and trying just the two hands or even just one hand (similar to our Ratio and Proportion hands?).

The Gesture Input icon has some pretty small components. Might want to see if we can make the swipe arrow larger or consider a different configuration. I have no real suggestions, but here are some images I found that may inspire others?

image

image

Let's get a meeting scheduled and send this one home!

terracoda commented 1 year ago

Great feedback Brett. Sorry, just seeing this now. I'll reach out on slack to see when @mariahmaephet is available.

mariahmaephet commented 1 year ago

So here's some edits from our conversation this morning--

Screen Shot 2023-03-27 at 11 46 37 AM
terracoda commented 1 year ago

These look great @mariahmaephet

Regarding color, I do like the 3 shades. That's a nice effect, but I fear it this might complicate things. Let's do a single color for each group and see how that works:

Here's the groups again: INPUT - Magenta:

AUDIO - 2 different colors Sound & Sonification - Blue

Description Display - Orange

VISUAL - Purple

Let's see how these 4 colors (Magenta, Orange, Blue, Purple) look together.

terracoda commented 1 year ago

Assigning back to you @mariahmaephet to do the single color groupings.

mariahmaephet commented 1 year ago

Let me know if I got that right

Screen Shot 2023-03-29 at 12 32 37 PM
terracoda commented 1 year ago

The color groupings are correct. Thank you Mariah!

Now, for the big questions @BLFiedler and @emily-phet, any thoughts on the color groupings? It was predictable...we have lost our rainbow effect.

Here's what I am wondering about:

amanda-phet commented 1 year ago

I just want to say I love the color groupings! All of the orange ones have speech bubbles, and that just makes a ton of sense.

Is there a chance we'll add another color to the set? If not... I wonder if we should pick 4 colors that look nice together and cover more of the rainbow spectrum than these four (basically, this set doesn't have any green, and that might balance it all out).

brettfiedler commented 1 year ago

The shading might be nice so long as it stays above 3:1, but we might be okay. I'm not sure that Voicing needs its own color. That might cause the groupings to lose meaning.

I'm trying to imagine how this will worked with RaP as an example: image

I agree with Amanda that maybe there is a shift in color set overall that would make this more appealing.

Also, here's some views of the icons in colorblind configs: Blue blind: image

Red blind: image

Green-blind: image

terracoda commented 1 year ago

I am good with keeping all description as one color! I agree the connection between the speech bubbles and the color is a very nice one.

emily-phet commented 1 year ago

I like Amanda's comment above re adding in something in the green to one of the groupings. Regarding how many colors total might, I can imagine the following total: Auditory Visual Haptic Linguistic(?)/localization - indicating that there's some way to change the language/localization in the sim...maybe all forms of this lumped together (e.g., language and visual displays related to localization) Input (all input methods lumped together for the foreseeable future)

So that would be five colors total if auditory were together.

@terracoda I think it will be hard to do shades of color within a grouping if each sub-feature gets its own color. Perhaps a different approach would be to have shades of color where it matters a lot to distinguish sub-features. For example, having one shade of orange for the text-centric auditory display and another shade of orange for sound and sonification, rather than having it be its own color. Right now, I would vote against having sound and sonification be its own color because the color mapping loses the connection to the modality if two auditory outputs are colored differently.

We could also use shades of color either now or in the future to distinguish between different types of input methods, if input methods grow larger in fully published sims. Right now the list is larger (Bluetooth, object tracking with OpenCV, and straight up plugin connection to bespoke custom device - the Smart Quad) are all options, but not yet in sims published to the main list.

I would suggest not distinguishing Voicing from Interactive Description with color. They are related in so many ways, and I like having one color for each modality emphasized in a feature, which is auditory for both.

terracoda commented 1 year ago

The only feature I can think of at the moment that is not yet represented is the Haptic feature. We have worked on this feature, but it is not published in any sims.

"Haptics" seems like another output display mode, that could potentially have its own color.

But I like the idea of pick the nicest 4 right now.

terracoda commented 1 year ago

I am good with using one color for Auditory.

terracoda commented 1 year ago

I am not the best person to choose colors. Based on @emily-phet's suggestion, the current colors would be reduce to 3, since we have no examples of Haptics yet.

Would this work?

Option 1: AUDITORY - ORANGE

INPUT - GREEN

VISUAL - PURPLE

HAPTIC - BLUE

terracoda commented 1 year ago

I need someone else to choose the 3-4 starting colors.

terracoda commented 1 year ago

And just adding that we could flip colours for Input and Auditory features.

amanda-phet commented 1 year ago

Orange, green, and purple sound like a nice set of 3 to me. That leaves room to add blue and magenta down the road.

terracoda commented 1 year ago

Option 2: AUDITORY - Green

INPUT - Orange

VISUAL - PURPLE

HAPTIC - BLUE

terracoda commented 1 year ago

@mariahmaephet, please recolor the icons based on options 1, and if it is easy to do both to compare, please do both option 1 and 2. If that's not easy we can run with option 1.

mariahmaephet commented 1 year ago

Alrighty, is this correct?

Screen Shot 2023-04-04 at 11 53 55 AM
terracoda commented 1 year ago

Yes, that is correct fro option 2.

terracoda commented 1 year ago

Is it easy to paste another swatch of icons where the Auditory ones are Orange and the Input one are Green?

mariahmaephet commented 1 year ago

Oh, yep, here ya go

Screen Shot 2023-04-04 at 12 00 56 PM
terracoda commented 1 year ago

Nice! I wonder if you can make the green slightly darker, closer to the green of the old Mobile-Interactive-Description icon? The little green one with the mobile phone - next to the orange one.

image
mariahmaephet commented 1 year ago

How's that

Screen Shot 2023-04-04 at 12 43 46 PM
brettfiedler commented 1 year ago

image

image

Contrast is fine with either green, in case that matters to anyone!

terracoda commented 1 year ago

I like the darker one.

brettfiedler commented 1 year ago

I don't know why, but I think I prefer the auditory icons as green and input as orange. No reasoning other than gut.

terracoda commented 1 year ago

Well, there is also this icon...that Amanda made for me for the description course. I was hoping not to change the color of the Interactive Description icon.

image

Seeing the grouped colors, I am still wondering if Sound & Sonification should be a unique color?