Interface Mockups

Still working on an interactive prototype, but here's some screen shots/story boards:


[1] - The user selects between viewing the whole database or just a sampling from a specific city, depending on their curiosity and if they're willing to put up with longer loading times.


[2] - The main interface loads and the viewer sees each posting is represented by a small symbol, in an ambient cloud. The user can uncheck the boxes at the left to hide entries from specific categories.


[3] - The user types in a word and presses enter. A small timer indicates the interface is loading.


[4] - The user's word emerges in the scene. Postings that contain the word flock towards it and highlight in color; those that don't fall to the bottom.


[5] - The user can also add another word by typing it into the text box and pressing enter. Again, postings flock towards words that they contain and highlight themselves. Postings hover in between if they contain both words, and highlight to an intermediate color. If they contain more of one word than the other, than their position reflects that bias.


[6] - If the user mouses over one of the words, the interface shows a small X that they can click on to remove it from the visualization.


[7] - If a user clicks on one of the posting icons, a more detailed view of the original post shows up.

-----------------------
Things I need help with:
-----------------------

- How can a user tag or highlight specific postings to keep track of?

- How are the positions of the user entered words determined? To more prevalent words come forward automatically? Does the user interact with or even specifically change them?

- My intention with adding color is to allow the postings to retain a reference to their user-defined groups. So if I add other views, say, geographic or demographic, the user can compare it back to this view. For example, if the user searches "yins" and then does a geographic view, they might find a concentration in the Pittsburgh.

More icons! I found a few more things I'd like to show. The pic has some of my new icons in it.

The top ones are the rainbow/anti-rainbow, just a few different ideas. Which one(s) do you like best?

I'm not going to describe the others, since I want to see if they make sense without a description :)

A much more interactive version is now up, if anyone wants to play around with it. Still a lot of 'look and feel' issues though...

http://jackieweber.net/Flash.html

I've started playing around with Flash. It's still pretty rough.

There's two views of the data - one is in a list form, and the other is in map form.
In list form, I think types of data should be able to be turned on and off via some control. On the map, I was thinking that data would pop up as you mouse over an image, along with the name of the school.

I'm not sure I'm going to show anything besides gender split, religious or not, size of school, and (for the map) location. Those seem to be the most interesting and relevant things.

The circles aren't exactly proportional, because the schools vary in size from 350 to 20,000, but hopefully they still give the user a decent feel for the relative sizes. I know this list page is really ugly, not sure what to do about it. The circles are kind of unwieldy.

Does the rainbow/anti-rainbow make sense? If you didn't know what this project was about, could you figure it out from that first page?

Right now, the only buttons that work are those in the upper left hand corner.
If you have Flash 9, you can check out what I have so far at : http://jackieweber.net/Flash.html


Thanks!

This is just one rough example of what my layout might look like, although it's still pending. I'm most likely going to have a digital piece rather than print.

So the first screen would have the over sized character there and his stomach would glow to indicate the viewer to click on it's stomach.



Once the stomach is clicked, it will zoom into the stomach and separate into different layers. Each layer would represent either, consumption, obesity, or health.



When you click on the top layer, the bottom layers would fade and a bar on top will appear. As seen on the right, there are two symbols indicating genders. To view the statistics, you would just have to drag one over to the left circle. I'm most likely going to have line or bar graph coming up from the platform.



I'm not sure if I'm going to stick with this and I don't know exactly how the whole piece would come together once I include symbols, but this is just one general idea I thought of.

Sorry about this coming out so late this weekend.
So I had this idea of working with transparencies so that you could see how the hurricanes have progressed so it will look something like this.

Here is a closer look at Hurricane David from 1979. Please ignore the smaller circles. It was a Category 5, but by the time it hit the US it was only a Category 2. I'm not sure if the black splotches are clear. I have tracked the amount of days as well, which I hope you can get.

Here's a static example for what I'm thinking about doing. It has the top two colleges on both lists. Note that I haven't figured out how I'm going to indicate which college is on which list, but I'm not sure I'm going to - maybe I should leave some mystery up to user/reader?

Is it clear what things mean here? Especially the circles? The gender signs and colors should help, but also I wanted the size of the circles to represent campus population roughly. They're not exactly in proportion to one another, since they would have to be either some really really really tiny ones or some really really huge ones, but I think it gets the idea across.

Let me know what you think. Thanks.