Provide visual indicators for common problems

[techieshark]

If we're collecting info about drainage, blocked ramps, steep ramps, etc, we may want to provide some visual explanations or icons for that. This may help the user understand what the terminology means (what does a "lip" look like, for instance), and may help experienced users quickly find the issues to report ("recognizing an image is easier than reading text (Norman, 1990)" --The design, understanding, and usage of pictograms).

Some good illustrations of issues wheelchair users face:
http://www.fhwa.dot.gov/environment/bicycle_pedestrian/publications/sidewalk2/sidewalks207.cfm

Quick draft of related pictograms:

I'm interested in feedback on both the general idea and the pictograms above. Thanks.

[techieshark]

Design mockup with icons and app.

[techieshark]

Below is a mockup of what the first intersection edit screen could look like.

Notes:

1. Some wording changes
2. Clicking 'so-so' on the top takes you to the screen I shared earlier today (above).
3. Instead of "all like last" we should know what "last" was (so-so in this case), and display that.
4. "Exit" might not be as clear as other language.
5. Hopefully labeling the rows makes it clear that the first row is in reference to this particular corner ramp, and the second row is for intersection-global tools.
6. I need to add in 'notes' somewhere (forgot about that).

[techieshark]

p.s. attributions:

Arrow (skip button) designed by P.J. Onori from The Noun Project

Save designed by Cris Dobbins from The Noun Project

Cancel designed by John Chapman from The Noun Project

Eraser designed by factor[e] design initiative from The Noun Project

Base mobile screen from http://developer.android.com/design/downloads/index.html

And the typeface is 'Cityof'.

[techieshark]

Incorporated feedback from a friend.

"This ramp" vs "All" was confusing.

• I've changed it to "This ramp" vs "The rest".
• When this screen first comes up, before any ramp state has been recorded, "the rest" section is inactive (shown faded), and the "all like last" functionality is not shown. When the user selects a ramp state in the first row, "the rest" functionality would appear.

I've also made the exit icon more standard (an 'x'). When the user exits, they'd be given the option to save or not save.

Messing around further (below), "the rest" becomes "entire intersection", I've added a notes button, changed "exit" to "done", and made various other changes.

[techieshark]

One last go at this.

• The top row icons are larger than the second row since that's where we want the user's attention to focus.
• Replaced the radio buttons with a slider, which helps visually group those options.
• Smaller icons below also helps us fit more text in, which hopefully provides increased clarity as to what the buttons do (because, for example, the save button is actually a save-and-return-to-another-screen button).

[rbracket]

Some questions:

How do we show each particular ramp. With text, "crossing NE 9th"? With highlighting in the graphic box?
The photo is streetview style. How do we plan to do that?
I'd like to visually/spatially separate navigation buttons from information collection buttons/icons
What if the slider stands alone?

[techieshark]

I've updated both screen designs.

Katie suggested adding something to make the water stand out more (which I've tried to do, below, while using only black and gray). I've also:

• rearranged the icons so the most commonly used are shown first, the pad related icons are adjacent in one row,
• changed the text and icon used to indicate that a ramp is blocked (using the "do not enter" symbol that is public domain), and
• exaggerated the lip to help people understand what a lip on a curb ramp is (something one friend was confused about). Hopefully placing it near the water icon helps people easily compare and see what the difference is. Another option to explain these, if people still have trouble, would be to display a photo and/or description if the user holds the icon down for a couple seconds (not shown).

How do we show each particular ramp. With text, "crossing NE 9th"? With highlighting in the graphic box?

I've changed the text at the top in the design shown below (first line shows specific area ("NE Halsey and NE 9th"), while second line shows what you're crossing. In the intersection indicator to the right of the second line of text, I've added an "N" to indicate which part of the intersection is North. There is now also an arrow that helps highlight which corner we're working on. You should be able to read the intersection indicator and see that you're on the NE corner, surveying the curb cut headed South.

The photo is streetview style. How do we plan to do that?

I have no idea. It may not even be possible, but I thought I'd see if others thought it'd be worth looking into. One issue I have with the current aerial view from Bing(?) is that it isn't close enough to see the curb ramps. In an ideal world, the data input (or verification) could be done remotely in places where streetview is good enough.

I'd like to visually/spatially separate navigation buttons from information collection buttons/icons
What if the slider stands alone?

The design below has additional space between the two, is back to saying "this ramp" (does that seem sufficient?), and skip is relabeled as 'next' (perhaps synonymous but more commonly understood button).

Thanks for reviewing this, Katie.

[rbracket]

Still liking the icons, and willing to take most as they are.

Steep Icon.
At some point, if the slope is the primary factor to record at each ramp, then we might try icons that indicate the slope range- For instance: (less than or equal to 5%), (between 5% and 12%), (greater than 12%) depicted with 3 separate icons. In this case we might show 5%, 5-12%, >12%. I know that I said I liked that the icons were monochrome, but color add a qualitative judgement to each range.

Lip Icon
I would like to have more reviewers for this icon and to ask if this correctly depicts the benefit of having a lip and whether we are using the best short word.

Water Icon
I think the grey "puddle" is good. Though I liked the icon without the tonal change.

Cracked Icon
Fun, readable.

No Pad, Bad Pad, Black Pad.
Also fun. We may get push back from some who call these things truncated domes. Also, we need to decide how to judge contrast and color. If we record gray, red, yellow truncated domes- some will ask- is it worth the time and space on the form. Training material needs to state that neither grooves nor striations are acceptable ( http://www.fhwa.dot.gov/publications/publicroads/04sep/10.cfm )

Blocked Icon
This icon seems to say "No Pedestrian Crossing." If this is so, do we need another icon for the case when there is an obstruction that would stop a wheelchair and be hazardous to low-vision pedestrians, yet OK for those walking.

Orientation Aids/Streetview/Aerial photos/North
I was surprised at the difficulty I had in keeping track of my own orientation, even at simple intersections. It was easiest if I could hold the screen like a map, with North up and then also stand so that I was facing North. If I was not able to see street signs or if the intersection was not orthogonal to North, I had to double check, then check again that I was recording the correct crossing. Individual spatial perception may vary and we are smart to think about this. I did want the screen to allow me to look at an aerial and then to view the modeled walkway network. I had the problem that when I zoomed in to see the street, I could no longer see the street name. We may find that we have more flexibility in the interface design if we let go of i-phone screens and instead design for 7 inch tablets.

I like the challenge of using a streetview, even if I think it would be difficult and maybe not useful. I suspect that people will expect to have a streetview option.

I like the more complicated intersection icon and would like to try it. I did misread the crossing arrow as a north arrow. I wonder if I would have understood that it indicated crossing direction if it were gray instead of black. There is an arrow on the left, pointing up and to the right. What for?

Pretty slick to have the Intersection level call-outs inherit the quality of the current ramp. ("All So-So", All None, All Good) And do the values not increase in goodness as the slider goes from left to right?

[techieshark]

Thanks for the thorough review!

There is an arrow on the left, pointing up and to the right. What for?

I was exploring ways we might show the North direction within the street view (where, in this case, the street goes North as it leaves up and to the right). Perhaps adding 'N' and placing the arrow closer or within the street view photo would help.

Pretty slick to have the Intersection level call-outs inherit the quality of the current ramp. ("All So-So", All None, All Good) And do the values not increase in goodness as the slider goes from left to right?

When you slide from So-So to Good, the "All So-So" would change to "All Good".

One reviewer felt she needed examples of what a blocked curb ramp would be. If you have any, that might help me come up with a better blocked icon.

[rbracket]

Some photos to show a blocked curb ramp:

[techieshark]

Thanks! Do you have any examples where the sidewalk is blocked only for
wheelchairs? The previous feedback I got was:

This icon seems to say "No Pedestrian Crossing." If this is so, do we
need another icon for the case when there is an obstruction that would stop
a wheelchair and be hazardous to low-vision pedestrians, yet OK for those
walking.

Given the examples above, wouldn't the "no pedestrian crossing" be
appropriate? Even though walkers could get around the obstacles shown,
they still degrade the walking experience.

[rbracket]

Hi Peter,

This is almost a total block for a person in a wheelchair. I have seen
others where the phone pole is centered in the ramp but do not find a photo
of such.

[image: Inline image 1]

So, I would not call this a no pedestrian crossing. In fact I crossed here
for 10 years before seeing a problem.

-K

On Thu, Aug 22, 2013 at 1:54 PM, Peter W notifications@github.com wrote:

Thanks! Do you have any examples where the sidewalk is blocked only for
wheelchairs? The previous feedback I got was:

This icon seems to say "No Pedestrian Crossing." If this is so, do we
need another icon for the case when there is an obstruction that would stop
a wheelchair and be hazardous to low-vision pedestrians, yet OK for those
walking.

Given the examples above, wouldn't the "no pedestrian crossing" be
appropriate? Even though walkers could get around the obstacles shown,
they still degrade the walking experience.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/7#issuecomment-23124949
.

Katie Urey
Portland, Oregon
503-228-3083 (land line with saxophone greeting)
503-780-9034 (cell, though not always "on")
ksurey@gmail.com

[rbracket]

The best photo I have handy is this:

[techieshark]

Perfect! Thanks.