search

HarlanH / code-for-dc-edu

Code for DC Education Project
20 stars 17 forks source link

display school facts #63

Open HarlanH opened 11 years ago

HarlanH commented 11 years ago

currently, we have no UI to show or explore details of schools. We should design some sort of way such that when you're looking at a school (such as when you've selected it in the schools page), there should be a box, probably in the lower-left part of the screen, with information about the school. Initially that'll be official report-card data, but over time it should include a much broader set of data.

cmgiven commented 11 years ago

Lunch break mockups! This is my first pass at revising the school view. I suggest pulling the filters above the information; potentially this box collapses once a school is selected. Then to incorporate school boundaries (#20), I suggest tabbing the map to flip back and forth between commute and boundary data (and other maps when new ideas/data present themselves). Reactions? Balsamiq XML below if anyone wants to suggest other ideas.

school-mockup

<mockup version="1.0" skin="sketch" fontFace="Balsamiq Sans" measuredW="910" measuredH="665" mockupW="769" mockupH="637">
  <controls>
    <control controlID="0" controlTypeID="com.balsamiq.mockups::BrowserWindow" x="141" y="28" w="769" h="637" measuredW="450" measuredH="400" zOrder="0" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Open%20Schools%21%0Ahttp%3A//edu.codefordc.org/</text>
      </controlProperties>
    </control>
    <control controlID="1" controlTypeID="com.balsamiq.mockups::Canvas" x="157" y="120" w="728" h="167" measuredW="100" measuredH="70" zOrder="1" locked="false" isInGroup="-1"/>
    <control controlID="2" controlTypeID="com.balsamiq.mockups::SubTitle" x="169" y="129" w="-1" h="-1" measuredW="170" measuredH="27" zOrder="2" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Select%20a%20School</text>
      </controlProperties>
    </control>
    <control controlID="3" controlTypeID="com.balsamiq.mockups::ButtonBar" x="169" y="156" w="-1" h="-1" measuredW="129" measuredH="27" zOrder="3" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Charter%2C%20Public</text>
      </controlProperties>
    </control>
    <control controlID="4" controlTypeID="com.balsamiq.mockups::ButtonBar" x="313" y="156" w="-1" h="-1" measuredW="205" measuredH="27" zOrder="4" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Elementary%2C%20Middle%2C%20High</text>
      </controlProperties>
    </control>
    <control controlID="5" controlTypeID="com.balsamiq.mockups::ButtonBar" x="169" y="198" w="349" h="27" measuredW="337" measuredH="27" zOrder="5" locked="false" isInGroup="-1">
      <controlProperties>
        <text>All%20Wards%2C%201%2C%202%2C%203%2C%204%2C%205%2C%206%2C%207%2C%208</text>
      </controlProperties>
    </control>
    <control controlID="6" controlTypeID="com.balsamiq.mockups::ComboBox" x="169" y="240" w="349" h="-1" measuredW="103" measuredH="25" zOrder="6" locked="false" isInGroup="-1">
      <controlProperties>
        <size>14</size>
        <text>Thomas%20ES</text>
      </controlProperties>
    </control>
    <control controlID="8" controlTypeID="com.balsamiq.mockups::Paragraph" x="533" y="156" w="337" h="109" measuredW="200" measuredH="80" zOrder="7" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Aenean%20commodo%20aliquet%20turpis%20in%20imperdiet.%20Sed%20fringilla%20euismod%20lorem%2C%20nec%20vulputate%20quam.%0A%20%0AMaecenas%20velit%20mauris%2C%20commodo%20vel%20ullamcorper%20nec%2C%20laoreet%20posuere%20quam.%20Sed%20volutpat%20ligula%20massa.</text>
      </controlProperties>
    </control>
    <control controlID="9" controlTypeID="com.balsamiq.mockups::Title" x="157" y="302" w="-1" h="-1" measuredW="213" measuredH="43" zOrder="8" locked="false" isInGroup="-1">
      <controlProperties>
        <bold>true</bold>
        <text>Thomas%20ES</text>
      </controlProperties>
    </control>
    <control controlID="10" controlTypeID="com.balsamiq.mockups::Map" x="437" y="302" w="448" h="322" measuredW="252" measuredH="222" zOrder="9" locked="false" isInGroup="-1"/>
    <control controlID="12" controlTypeID="com.balsamiq.mockups::MultilineButton" x="157" y="565" w="265" h="59" measuredW="139" measuredH="66" zOrder="10" locked="false" isInGroup="-1">
      <controlProperties>
        <color>10470904</color>
        <text>Zoning%20Boundaries%0AWhich%20areas%20are%20in%20boundary%20for%20this%20school%3F</text>
      </controlProperties>
    </control>
    <control controlID="13" controlTypeID="com.balsamiq.mockups::MultilineButton" x="157" y="498" w="265" h="59" measuredW="165" measuredH="66" zOrder="11" locked="false" isInGroup="-1">
      <controlProperties>
        <color>16777215</color>
        <text>Student%20Commutes%0AWhere%20do%20the%20students%20at%20this%20school%20live%3F</text>
      </controlProperties>
    </control>
    <control controlID="14" controlTypeID="com.balsamiq.mockups::Paragraph" x="157" y="360" w="265" h="138" measuredW="200" measuredH="80" zOrder="12" locked="false" isInGroup="-1">
      <controlProperties>
        <text>650%20Anacostia%20Ave%20NE%0AWashington%2C%20DC%2020019%0A%20%0AAt%20Neval%20Thomas%20Elementary%20School%2C%20our%20mission%20is%20to%20help%20our%20students%20excel%20academically%20while%20becoming%20well-rounded%2C%20global%20citizens.%20We%20partner%20with%20the%20DC%20Promise%20Neighborhood%20Initiative%20which...</text>
      </controlProperties>
    </control>
  </controls>
</mockup>
ajschumacher commented 11 years ago

Super cool!

I'm currently on a Bret Victor kick, so I submit as meta-design-comment his 70-page "Magic Ink": http://worrydream.com/MagicInk/

A philosophical opinion: These are all public schools. The trend toward thinking of the distinction between charter and non-charter public schools as the most important distinction you can make about public schools is largely the result of the conflict between unquestioning advocates of charter schools and unquestioning critics of charter schools I don't think it's helpful. I don't think we should encourage this mindset, and I certainly don't think we should encourage parents to think that their decision process starts with a choice to go charter or not.

A practical opinion: I don't know how relevant this is to DC, but schools can come in a lot of different configurations. Not just HS, middle, elementary. In fact, not everyone agrees about what grades belong to these divisions. What do you do with a K-6? An 8-12? And of course there are the more common combos, like K-8 and 6-12. It's easy to side-step this by just asking: what grade are you looking for? Everybody (more or less, in the US public system) agrees about the grades. This is flexible and works for parents who wonder if they can find a school that both their children can attend, etc.

Please don't ever make a user select a school from a drop-down list. (I think Bret is with me on this one.) (Maybe include an auto-completing search box or something.) The map is there, let's use the map for all selection. Schools that don't serve the relevant grade(s) or whatever get greyed out.

Show the boundaries we care about by default, yes? (Oh and this balsamiq thing is pretty fun, but... any kind of line you want, as long as it's vertical or horizontal, eh?)

Are wards relevant if we're already looking at a map? I don't know how the school selection process works here; maybe parents want to click on their home location and see what schools they're eligible for? Is that a thing? It seems like people can go anywhere, based on the commute patterns?

There's a better way of putting the data in than what I'm mocking up here... Oh and that's "slipsum" (Samuel L. Jackson lorem ipsum) :) Maybe really instead of the bubble thing we have it throw up little info-cards with key stats on the right hand side, so you can put up a couple and compare them?

[image: Inline image 1]

There's a little idea dump for now - maybe I'll get on this nodification stuff. :)

On Wed, Oct 2, 2013 at 12:36 PM, Chris Given notifications@github.comwrote:

Lunch break mockups! This is my first pass at revising the school view. I suggest pulling the filters above the information; potentially this box collapses once a school is selected. Then to incorporate school boundaries (

20 https://github.com/HarlanH/code-for-dc-edu/issues/20), I suggest

tabbing the map to flip back and forth between commute and boundary data (and other maps when new ideas/data present themselves). Reactions? Balsamiq XML below if anyone wants to suggest other ideas.

[image: school-mockup]https://f.cloud.github.com/assets/5375557/1255147/868a06da-2b80-11e3-97b4-c776a8e045e8.png

Open%20Schools%21%0Ahttp%3A//edu.codefordc.org/ Select%20a%20School Charter%2C%20Public Elementary%2C%20Middle%2C%20High All%20Wards%2C%201%2C%202%2C%203%2C%204%2C%205%2C%206%2C%207%2C%208 14 Thomas%20ES Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Aenean%20commodo%20aliquet%20turpis%20in%20imperdiet.%20Sed%20fringilla%20euismod%20lorem%2C%20nec%20vulputate%20quam.%0A%20%0AMaecenas%20velit%20mauris%2C%20commodo%20vel%20ullamcorper%20nec%2C%20laoreet%20posuere%20quam.%20Sed%20volutpat%20ligula%20massa. true Thomas%20ES 10470904 Zoning%20Boundaries%0AWhich%20areas%20are%20in%20boundary%20for%20this%20school%3F 16777215 Student%20Commutes%0AWhere%20do%20the%20students%20at%20this%20school%20live%3F 650%20Anacostia%20Ave%20NE%0AWashington%2C%20DC%2020019%0A%20%0AAt%20Neval%20Thomas%20Elementary%20School%2C%20our%20mission%20is%20to%20help%20our%20students%20excel%20academically%20while%20becoming%20well-rounded%2C%20global%20citizens.%20We%20partner%20with%20the%20DC%20Promise%20Neighborhood%20Initiative%20which...

— Reply to this email directly or view it on GitHubhttps://github.com/HarlanH/code-for-dc-edu/issues/63#issuecomment-25554278 .

ajschumacher commented 11 years ago

screen shot 2013-10-02 at 5 44 40 pm works now?

cmgiven commented 11 years ago

Yes, Balsamiq: good for when your creativity is limited to the 25 most common UI elements used exactly as they have been used a million times before. On the upside, it's easy and I'm lazy. And I love the slipsum, although I somehow don't think that will fly for client projects.

I agree 100% with all three points: 1. charters are public schools too, 2. DC schools don't fit neatly into ES/MS/HS categories, and 3. a dropdown is a poor means of selecting from a list of hundreds of schools.

I don't know that the answer is to go to a 100% map solution. This prioritizes location over all else, and makes it difficult to find a specific school if you don't already know where it is. The popover idea will also be difficult to translate directly for mobile. Some quick thoughts:

Is there interest in taking the neighborhood view and turning it into a more generalized map-based school search view? Or the alternative might be to refine the existing search interface on the school view page? The former's probably a larger leap, the latter a smaller step.

cherihung commented 11 years ago

so many good points and good ideas here.

I also think we should have a search interface that is not entirely map-based to find a school. auto-search box sounds like a good way to go. a big feature for users who know exactly which schools they want to see.

I do like the idea of a general map-based school search view though. Good for exploration purpose. e.g. show pins of all the schools that are in an user's view? then the school pins can be filtered out with UI options like the "schools serving grades" menu.

maybe we can have the pop-over window show just a tiny bit of info to accommodate for issue on mobile. but then include a link or way to toggle/display more data on the side? (which seems that we'll have to do eventually anyway as we integrate more and more data about each school)

(it's 3am. and i really should get some sleep.)