Redesign labeling icons?

[jonfroehlich]

We are likely to add crosswalk and possibly even pedestrian signal label types. We'd need to generate icons for these buttons. In doing so, this may give us an opportunity to redesign all of our label types and color schemes. This may be possible because of talented folks like @isavin12 that we've added to our team.

[jonfroehlich]

As part of the redesign, maybe we work on updating our color scheme to reduce saturation (the green is super saturated/bright, see screenshot) and for better visual cohesion with our logo and branding (which didn't exist when we first created Project Sidewalk's UI).

Thoughts @Luciozzz?

[jonfroehlich]

So, it seems like both of our new partners (Chicago and Amsterdam) want us to add two label types: crosswalk labels + pedestrian signal labels. We need to redesign the label button bar slightly to accommodate this (possibly by shrinking their width or some other creative solution).

We also talk about adding crosswalk labels here: #295 and here: #131 (comment).

Tagging @isavin12 and @Luciozzz. Not sure how this might fit into your design plans this quarter. We should talk.

[jonfroehlich]

I'm just bumping this for @isavin12 and @Luciozzz. We need to start moving forward with crosswalk and, potentially, pedestrian signal labeling buttons... but we need icons first.

Either we just derive them from our original icons set (see: https://github.com/ProjectSidewalk/Design/tree/master/LabelingButtonIcons) or we come up with new iconography and color.

Let's discuss during the meeting today?

[Luciozzz]

Here is a new set of icons (preview) per request and per our meeting last Friday:

When designing the icons I thought of my experience using the labeling tool... I kept putting down labels about what's missing but always forgetting to also label what's already there. For example, I remembered to label "No Curb Ramp" but forgot to label "Curb Ramp".

So I came up with another set of icons, trying to solve the problem:

I juxtaposed green checkmarks with red crosses to remind our users to label the bad AND the good.

@jonfroehlich @isavin12 Any thoughts?

[jonfroehlich]

Thanks for this work @Luciozzz. Great progress!

1. In order to truly evaluate the new icon sets, I think we need to see them in context (both at their small size as well as with different colored backgrounds like we have for the circular labels once placed). Here are some rough current sizes, which could change of course.

2. I'm not sure how I feel about the green checkmark. I agree that it provides some design language consistency between the red X but I tend towards simpler designs, so I gravitate towards the iconset without the green checkmarks.

3. It looks like you're not actually using the Project Sidewalk character, which has feet and thicker wheels. I'm copy/pasting the colorful version with the "rainbow sidewalk" but you can take that out. You can find all of our design assets here, including the original AI files where you can remove the rainbow so it's just the Project Sidewalk character.

4. I also think we should change the 'Explore' icon to something less abelist
   

to maybe this 'explorer' icon I made

5. We also talked about updating the color scheme. Have you thought about that? We'll have to come up with even more colors if we continue to assign one color per label type....

[Luciozzz]

Thanks for the feedback @jonfroehlich! I noticed something in the original raw logo file:

So I cleaned it up a little:

(Might be hard to see the difference but it looks more professional now :))

Will upload a screen mockup with new icons and color scheme soon.

[jonfroehlich]

Oh, this is great! I always noticed this rough wheel design in the past and I wasn’t sure if it was intentional texture or not. Relatedly, we should update our animated gif so it’s less pixelated and more professional

…

-- Sent from phone

[jonfroehlich]

Can you make sure to add your new cleaned logo to https://github.com/ProjectSidewalk/Design/tree/master/Logos?

It's also not clear to me that we need a "missing pedestrian signal" and "missing crosswalk icon"—because this would require contextual knowledge and perhaps even domain expertise in deciding where/how a city is supposed to design traffic and pedestrian flow. Instead, I think it's more likely that we just have the labels for identifying and assessing pedestrian signals and crosswalks signals.

[isavin12]

Oh, this is great! I always noticed this rough wheel design in the past and I wasn’t sure if it was intentional texture or not. Relatedly, we should update our animated gif so it’s less pixelated and more professional
…
-- Sent from phone

@Luciozzz I worked on updating the GIF this past summer and have the updated file. Where should I upload it?

[Luciozzz]

New cleaned logo added.

I agree with having labels for identifying pedestrian signals and crosswalks signals. Here is a mission screen mockup with new icons and colors:

Would love some feedback! @isavin12 @jonfroehlich

[jonfroehlich]

Woohoo! So great to see this. New icons look cleaner and more uniform. Congrats @Luciozzz for this milestone!

Some quick thoughts.

1. How did you come up with the color scheme? Can you reference your sources and include the actual RGB or HSL values?
2. Are the button widths all equal sizes? Some appear larger than others. Regardless, I think we might want to shrink them down by ~10% (or more). They feel cramped. Similarly, the wheelchair in the icons sometimes feels too close to things... I think we could push it left a few pixels in the 'No Curb Ramp', 'Obstacle in Path', 'Surface Problem' and 'Pedestrian Signal' buttons
3. We might want more of a semantic grouping of buttons. For example, 'Curb Ramp', 'No Curb Ramp', 'Pedestrian Signal', and 'Crosswalk' are all relevant to intersections. I feel that they should be close to each other.
4. While this is a great MVP, I think you may want to also consider a different look entirely for the buttons. For example, do they need to be lightgray or even rectangular. But I think this is more of a question for a larger redesign...

[Luciozzz]

In terms of colors, I did some research on coolor.co and curated a set of colors that's easier for the eye, with lower contrast. I also tested the color accessibility and they all pass a 5:1 ratio based on WCAG 2.0 guideline. Here are the hex numbers:

I agree with re-grouping the buttons. I will test out different button designs and upload mockups soon!

[jonfroehlich]

Thanks. Colors look promising. Will have to see what they look like once actually applied to the UI. Nice work Duanhao!

…

On Fri, Oct 29, 2021 at 9:43 AM Duanhao ***@***.***> wrote: In terms of colors, I did some research on coolor.co and curated a set of colors that's easier for the eye, with lower contrast. I also tested the color accessibility and they all pass a 5:1 ratio based on WCAG 2.0 guideline. Here are the hex numbers: [image: image] <https://user-images.githubusercontent.com/18668038/139471953-d45e15a2-c789-479b-abbd-f9e0b761f026.png> I agree with re-grouping the buttons. I will test out different button designs and upload mockups soon! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2684 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55LCLFAXANDCEE54RTTUJLFMTANCNFSM5FGNIY4A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

-- Jon E. Froehlich <https://jonfroehlich.github.io/> (he/him <https://www.mypronouns.org/he-him>) | @jonfroehlich <https://twitter.com/jonfroehlich> Associate Professor, Allen School of Computer Science & Engineering <https://www.cs.washington.edu/> Director, Makeability Lab <https://makeabilitylab.cs.washington.edu/> | Assoc. Director, CREATE <http://create.uw.edu/> | Faculty Chair, MHCI+D <https://mhcid.washington.edu/> Help make sidewalks more accessible: http://projectsidewalk.org

[Luciozzz]

I've worked on a new set of icon designs and here they are:

This is a mockup with a more spacious button layout and new button shapes:

Would love even more feedback! @jonfroehlich @isavin12 Once we've OK'ed the design, I'll go ahead and apply them to the labels, the popup labeling window, and the mission start screen (shown below):

[jonfroehlich]

Wow, what great progress @Luciozzz. I think this new set is cleaner and each icon is more distinguishable from others in the set!

A few comments.

1. I think the "No Sidewalk" icon could again include the wheelchair user as you had before. So, something like the following but without the pedestrian light:
   

2. I wonder if there is a way we could make the obstacle icon clear that it's not just about labeling fire hydrants or poles but labeling those things when they impede someone with a wheelchair (e.g., no space on sidewalk to go around). This relates to Need to better educate users about sidewalk design #2685.

3. What is this part of the surface problem icon?
   

4. I think we should try to make an ADA compliant ramp for the "curb ramp" icon. My concern is that the current icon doesn't really look like a modern curb ramp, just a "slant" down. To do this, you might need a slightly different view perspective that allows you to see the ramp.

Here are some pictures of ADA-compliant ramps:

Source

And sketches and more info that you could use as design inspiration:

Source

Source

See also:

• https://www.roads.maryland.gov/ohd/adafinal.pdf
• https://www.dot.state.pa.us/public/Bureaus/design/ADA/PocketGuide.pdf
• https://www.access-board.gov/ada/guides/chapter-4-ramps-and-curb-ramps/

[misaugstad]

I came here to say basically the same things as @jonfroehlich which is a good sign 😉

1. We should probably make the ramp appear ADA accessible if possible
2. The surface problem icon is really just not clear to me. A cracked sidewalk might be relatively simple while getting the point across?
3. For the no sidewalk icon... I don't love it. I don't hate it. I'm not sure that I would want the wheelchair user added to the icon 😂 I might like it enough as-is
4. Jon makes a good point about it being too easy for someone to fall into just thinking about obstacles and poles / fire hydrants. Maybe there is a type of obstacle that we could put that isn't just your standard pole or fire hydrant that would get ppl thinking about what it means for there to be an obstacle, without needing to make the icon too noisy? My first thought is a parked bicycle on the sidewalk, but that's a noisy object to add on it's own!

[isavin12]

@Luciozzz great work! It's a step in the right direction. Could we possibly try a hyper-simplified version of these label types? I still feel like these are a little too detailed.

Also maybe we move the text out of the icon, so it sits under the icon?

Could we also see what they look like without color? At the very least keeping color within the icons to just two. For instance I think it's too busy to have red, navy, white, grey, and pink for "no curb ramp". Just thinking back to Jon's comments about how the color starts to lose meaning once we have more than like 3. I've been looking at Google's icons for MEET and MAPS for inspiration:

[jonfroehlich]

As we're working on this, I recalled that one of the first working prototypes of "Project Sidewalk" was actually for crowdsourcing inspections of bus stop landmarks, which we received a Best Paper Award for at ASSETS'13.

Here's the interface and labeling icons for bus stop signs, bus stop shelters, benches, trash cans, mail/news paper box, traffic signs/poles.

And here's a video demo!
https://user-images.githubusercontent.com/1621749/140751218-3eb53f19-5383-4d42-bdf5-494a837d68ea.mp4

[jonfroehlich]

In conversations with Barbara Minsker at SMU, she suggested using the language: "Curb Ramp Needed" rather than "Curb Ramp Missing" (and, similarly, "Pedestrian Signal Needed" and "Crosswalk Needed"). I like this language because it signals to users that they are, in some ways, voting a preference and acting a bit like community urban planners.

Additionally, a key challenge with bringing in more labeling buttons is the complexity of the task. I was thinking that perhaps there is a UX way of solving this that would also let us have both the "Needed" buttons for curb ramps, pedestrian signals, and crosswalks. So, in total, we would have:

1. Curb Ramp
2. Curb Ramp Needed
3. Crosswalk
4. Crosswalk Needed
5. Pedestrian Signal
6. Pedestrian Signal Needed
7. Surface Problem
8. Obstacle in Path
9. Sidewalk Needed
10. Other

There might be a few ways of reducing these. For example, we make "Curb Ramp" and "Curb Ramp Needed" one button or icon and when you mouse over it, it animates into two buttons where you can make your selection. Alternatively, you click on the "Curb Ramp" button and when you drop it in place, the first thing you select is whether it's missing or there. In either case, we would have:

1. Curb Ramp + Curb Ramp Needed (as one button)
2. Crosswalk + Crosswalk Needed (as one button)
3. Pedestrian Signal + Pedestrian Signal Needed (as one button)
4. Sidewalk Problem (and could animate out to 'Surface Problem' or 'Obstacle in Path')
5. Sidewalk Needed
6. Other

Thoughts?

[Luciozzz]

I like the new naming pattern. I think it's clearer and also easier for us to develop icons. The current newest version of icon design is down below:

And here is a mockup:

[Luciozzz]

Also, I think it's helpful to reduce the number of icons by doing this:

Will think about the new naming and have a mockup ready soon.

[jonfroehlich]

Yes! This (#2684 (comment)) is what I was thinking about... though we might have to implement this slightly differently to:

• Use a different primary icon that indicates it might expand into curb ramp / curb ramp needed (as now, you double up on the 'curb ramp' label for both the unexpanded icon and then reuse it for the 'curb ramp' icon
• Minimize screen real-estate. Your idea will use lots of vertical space (essentially doubles the vertical need of button length due to where the pop-ups are placed)

[jonfroehlich]

I was thinking about this more this morning and I'm still wrestling with people's ability to discern when a crosswalk or pedestrian signal is needed. I could see folks reliably marking their existence (when they exist) but being able to think through when a crosswalk or signal is needed, or not, feels like a transit planning task that is more advanced than what we currently ask of folks in Project Sidewalk.

I think that some of our users—who are particularly diligent or skilled or come from a background in urban planning or walkability audits—could do this without a problem but could the "general" user?

[misaugstad]

I think that some of our users—who are particularly diligent or skilled or come from a background in urban planning or walkability audits—could do this without a problem but could the "general" user?

That is really my main concern here. Given the mistakes being made with the more simple label types and our discussions about more training for those, I don't see how your average user would have the knowledge to label the absence of signals without a dedicated tutorial.

[jonfroehlich]

Yah, I was thinking that we could keep "Missing Curb Ramp" (or rename it to "Curb Ramp Needed") but for pedestrian signal and crosswalk, perhaps we return to only labeling the existence of those and not asking our users to provide judgments about where they are necessary (if they don't exist).

[Luciozzz]

I was thinking that we could keep "Missing Curb Ramp" (or rename it to "Curb Ramp Needed") but for pedestrian signal and crosswalk, perhaps we return to only labeling the existence of those and not asking our users to provide judgments about where they are necessary (if they don't exist).

Returning to only labeling the existence would reduce the total number of icons to 8:

If we only have 8 icons in total, I'd suggest we cancel the hover interaction (#2684 (comment)) and put those 8 icons straight out to get rid of additional steps. Instead, we could group them with tags, e.g. something like this:

I moved the zoom in/out to the left to save some space at the top. I've also adjusted the icon colors and provided several versions.

[jonfroehlich]

Hi @Luciozzz. I agree!

Really love some of the ideas here: the circular icons, the groupings and separation, etc.

1. What's the difference between 1 and 2 above and 3 and 4 above?

2. I quite like the circular buttons: they feel nice and clean. Will people know they are clickable?

3. I think the "Curb Ramp Needed" icon still needs work. The newest icon makes it seem like the curb ramp is not needed rather than it's missing.
   

Maybe you need to go back to something like the following but using an arrow to point out the lack of ramp?

3. Also, we need to see what these look like when placed on an image. Before, we changed the outline and fill colors. It looks like from your one example that we'd only use outline color (and keep fill color as white or gray)?
   

4. Can we make a sidewalk segment seam on the obstacle in path icon (so it looks more like a sidewalk). Also, others have suggested changing the obstacle from rocks to something that is more common (like a pole that prevents access). I agree that the challenge here is indicating to the user not to label all poles, fire hydrants, etc. but only those that impede movement

5. Finally, I think the "Other" (triple dots) icon may need to be improved a bit...

[misaugstad]

@jonfroehlich are we planning on keeping the "can't see sidewalk" label type? If so, we'd need a new icon for that as well and would need to decide where that icon will go.

[jonfroehlich]

Yes, I think that continues to be important, don't you?

[misaugstad]

Yeah I just wasn't sure because that label type hasn't been mentioned at all yet. It also theoretically has a good use (showing where a physical audit would be useful), but we haven't really done anything with that label type yet.

[Luciozzz]

I came up with some new designs for curb ramps and other. Here is a comparison between the old ones and the new ones:

[Luciozzz]

About the "other" icon - I think it's actually helpful to use a simple version (the + sign or ... sign). I understand it's gonna look great if we can come up with a general representation of the "other" category in context; however, it is really hard to find a general representation and the reality is it doesn’t matter because our users will decide. All we need to do is to create a symbol, label it so that our users can proceed to recognize and use the symbol. It will then become popularized in the system.

[Luciozzz]

The same thing goes to the obstacle icon - I'm afraid that if we use a pole in the middle of the street, users will perhaps mis-mark pedestrian signal poles and road signs. Using something that can represent a general idea and is not misleading could be better (like the rock).

[yeisenberg]

Neat stuff! i like 1 for curb ramp, and missing curb ramp and then the 3 dots for other. For the curb ramp ones, i wonder if they could look more like a corner? the part on the left looks like a mid-block crossing. Like if you made the bottom left part as more of a corner? Great stuff! Yochai

[yeisenberg]

I found the Rock a bit hard to understand/immediately get. What do you think about a fire hydrant? or if its a pole, someone indicating a narrower width? like with double sided arrows between an edge and the pole?

[Luciozzz]

Here are some modifications:

About the "obstacle" icon - the current one that we are using right now is the fire hydrant, but we talked about that and thought users would probably label fire hydrants only and ignore other ones. That's why I came up with a more general rock icon. I made a pole icon with arrows for us to compare, but I still think rocks are better.

[jonfroehlich]

Wow, great work @Luciozzz.

1. Could you try a curb ramp design where the corner is even more salient? Maybe placing the curb ramp on the corner itself?
   

2. Thanks for making those other obstacle in path icons. I think of all of them you've come up with, I prefer the fire hydrant but I also wonder if there is a way to indicate that the there is no room to go around the hydrant, sort of like you have with
   

3. I think this "missing curb ramp" design is SUPER creative (nice job!) but I wonder how well it scales down given the nuance of the dotted lines (and whether it would be easily understood).
   

Thus, I probably like this one best (but I'd like to see it with a corner):

[Luciozzz]

After all the iterations, here is the latest version of the icons:

Here is a mockup of the current mission screen with the new icons:

And here is a mockup of the redesigned mission screen with the new icons:

[jonfroehlich]

This is amazing. Way to go @Luciozzz!

In our PS meeting, we talked about:

1. Making sure that placed labels are small (if possible, making them the same size as we currently have). To enable this, maybe custom make smaller versions of the icons (e.g., the small version of "Obstacle in Path" is just the fire hydrant, "Surface Problem" is just a crack, etc.)

2. Whether or not we can and should push a full UI redesign at this point or just add in the labeling icon top bar (for now) and continue working on the UI redesign in a separate ticket.

[jonfroehlich]

@misaugstad, you and I need to talk about implementation timeline on this as we Amsterdam is expecting this by the end of January (so you might have to do some frontend work!) :)

[misaugstad]

Since I'll be out for at least a week in January, I should start working on this next week. I'll start working towards the mock that uses our current interface with just the new icons for now.

How close are we to having the icons finalized with the correct size and everything? I can start working on this without the final design for the icons, but I'll need them somewhat soon I'd think.

[jonfroehlich]

Since I'll be out for at least a week in January, I should start working on this next week. I'll start working towards the mock that uses our current interface with just the new icons for now.

Was thinking the same thing.

How close are we to having the icons finalized with the correct size and everything? I can start working on this without the final design for the icons, but I'll need them somewhat soon I'd think.

You should coordinate with @Luciozzz directly on this. We should get all icon related design work committed to the Design repo as well: https://github.com/ProjectSidewalk/Design

[misaugstad]

@Luciozzz sorry that we missed this earlier, but we also need to work on the design of the subcategory menu when someone clicks on the "other" section. Right now it brings up a dropdown with the "other" and "can't see the sidewalk" label types, shown below. Which also reveals that we need a "can't see the sidewalk" icon!

@Luciozzz if you don't have time to work on this design (this week or at all), just let us know!