Interaction Design

Keeping it simple, organized, and relevant to the material that will be presented within the structure.

I started by sketching out a few ideas of how I wanted to present the material, then went with what I thought looked would be the best for the site I’m designing. The sketch on top of the picture seen below is the several different categories possible for my site on the Water Cycle. Underneath it I condensed those categories into five smaller categories and sub categories.

sketch of chosen structure

This is what I designed in InDesign, to better illustrate my idea for the structure in nice clean lines.

structure done in InDesign

I learned that I need to have this structure in place before I start sketching, so I know what needs to go where. It’s also helpful to know how many categories there will be, and how to set up the way to get to there. I tried a few sketches before setting up the structure, but it proved useless. I needed the structure set up first.

I created a site map for my website on Genetics to indicate exactly what pages will hold which information, and also how to get to those pages through site navigation.

My site map is really simple. I divided my topic into two main objectives: understanding how traits pass through parents to offspring, and how survival is affected by both physical and environmental factors. I decided to create two more categories; one contains exercises that relate to the objectives and the other contains the vocabulary and definitions students need to understand.

Site map for genetics web site.

Creating a site map helped me out now that I’m starting to layout my site and create a grey box layout. Now I know how many pages I’ll need, what kind of sub-navigation I’ll need, and how I’ll present the information (ie. on separate pages or with more scrolling). It’s really good to chart everything out before you start designing, because it would really be hard to have your site half-way designed and realize you didn’t create something you could have worked out in your site map.

Figuring out how it all connects and what’s most important…

I created a bubble map of the information’s heirarchy (for my own sake) before creating this one which lists specifics web pages.

Lines without bubbles represent information on a page that doesn’t connect with a new, additional page.

After gathering the information for my site, I thought of several ideas that would be easily nagagated but interesting visually for the 5th graders.

For the topic of the process of evaporation and condensation it would be nice to see images that were explaining the information and allowing examples to show.

process of evaporation and condensation site map

a wire frame of the site was also thought of that allowed me to see the general layout. This included a header and a navigation that would remain on the left side throughtout the site.

process of evaporation and condensation wireframe

Broken down based on content, the more informative parts (environment and energy). Further break down to meet the goals for student learning.

Boston Public Schools require students to give examples of how to apply these principles so I am going to have a section giving examples of how all of these principles can be applied so the student can start thinking of applications on their own as well.

Thinking about how this site map got me excited to move forward with the project, I keep getting ahead of myself. Now that I have a site map, it is easier for me to plan it out.

I enjoyed doing my wireframe because it helped me to divide up the space on my main page for my site and better decide where to put the elements on my site. I would like my image to take up most of the background and have the header/navigation floating about a third of the way down the page and have my content just be one column that will take up about a third of the left of the page.

So I was thinking that this was just going to be a small smiple little site that wouldn’t take too long to organize. But once I started doing the site map and all that, I started to have a little more appreciation for even the worst sites I had seen. They may look simple but you really have to put everything together in a way that actually makes sense and that I’m finding out is going to take some time.

Sitemap

They way I thought I would do this was that that I would just seperate all key terms for each little section that I was doing. As you can see it’s not the most complex site map in the world.

After looking at the other websites, I decided that the key for me was to keeep it as simple and as east to navigate as possible. I have been debating whether I would even have them scroll down at all, or should I just make all the info I need just stay at the top and then they just need to keep flipping the page. I think I will rethink my wireframe before I post it.

The daunting task for my subject matter is to not go the cheesy route. There are plenty of examples below of what not to do. No child left behind? Looks like people creating websites for children aren’t giving the poor kids a fair chance. Hierarchy, clear copywriting, and imagery are all key elements to hold a 10 year old’s attention. My job is to harness A.D.D. in a good way.

The idea is to make a site for a 5th grader to use and learn from; not to make it look like a 5th grader created the website.

-You can quote me on that…

My discovery phase has been eye-opening to say the least. Lets look at what I am competing with:

NASA's basic info site

Can you say web standards?

The best design by far...

Basic text with basic img

This one is all over the place

repeating cloud background- so 1996

Not bad for the plane

How stuff works

Structure

Since my site document will determine my grade. I decided to weed out stuff that was redundant and also items that would be too difficult to represent electronically. I drew a chart so I would get it:

drawing this helps

The digital version of what I drew

My next phase is sketching. I look forward to figuring out what works or not. Goodnight till next time.

Thumbnails of my concept(s)

It took me about 9-10 sketches before they became more meaningful and thought out. Thinking through the eyes of a 5th grader is hard, but helps me get at the root of the problem. Once I understand that problem I know I can solve it with intuitive design. Intuition vs. arbitrary arrangement. Process vs. regurgitated information. I figured out a couple of concepts that will let the student know where they are in relation to the rest of the content. Hopefully the end user won’t be asking themselves when this hell of a web learning experience will end. If I indicate where they are and where they are headed there are no surprises and maybe, just maybe someone will appreciate it.

Here they are please excuse the blurry webcam…

Site concept thumbnails. The better ones are towards the bottom

Laying out the structure of the web by diving up information into categories used to easily find and navigate the site. And giving a rough idea of the layout of the website.

Site Map

While deciding the categories I was reminded of our previous project on pygmy goats. Divining up the content seemed easily the second time around and I am very appreciative of the previous experience sorting content.

I divided up the content into 5 pages. I will try to limit the amount of body copy so I don’t scare away the kids with too much text, so I kept that minimal. Designing the basic wire frame really helped me visualize the website in a way I had not before. Rather then dicing head first into the webpage the simplest version of the website lets me see some of the problems before I get to far into the website.

Structure

The basic structure the i’ve come up with for my website consists of a different page for each planet. On the specific planet page there will be an image, information about that planet, fun and quick facts about that planet and the navigation to take you to other pages. When i looked at other websites i noticed that they felt really text heavy. i want to get my subject across to the kids without being too deep into the content that they are overwhelmed. I want my site to be easy to use and fun so that the student actually enjoys learning about planets.

site map & basic structure

wire frame for simple machine pages

Through gathering information from various sites about simple machinery I have narrowed down the topics to the essentials.

As I have it planned now, the main page will go over what simple machines are what they are used for and why we need them.

From there the 5th grader can look at each simple machine and see how it works. I plan on having each specific simple machine link to it’s corresponding Observe and Create page.

The observe page will take a look at machines as they are used in the world around us, and as used in projects by other 5th grade kids. The Create page will have instructions on creating simple machines so the 5th grader can understand how it physically works, as well as post ideas/creations of simple machines “working for you”; or rather machines doing simple chores for kids, like a pulley poring milk. Both the Observe and Create pages can be accessed through the main page and view all simple machines at once.

Basic site map for simple machines

There will also be a page explaining compound machines; explaining, observing and creating multiple simple machines that work together.

As well as a resource page citing my sources and documents/ideas for teachers and parents.

While working on this, the more I worked on it the simpler it became. There will be a lot of links, to encourage 5th graders interaction with the site; but generally the site will be very simple to navigate. There will definitely need to be a main navigational bar so that students can back track easily and look at something else; as well as secondary navigation to continue moving forward.

On my wire framing, I have a feature section where I plan on displaying 5th grade work to encourage new site visitors to become hands on; which will encourage the learning of the objective.

*****

I decided to rework my wireframe. It was really hard to visualize what I was intending from the first draft. I was hesitant to let the first one get too ‘hairy’, but it was the only way to properly portray that the main page is both the portal to all the other pages, as well as the pit stop in between.  The content I am working with lends itself very easily to keeping this site very intertwined. Every page function will act as I previously stated.

I am working on adding more twists, but I fear biting off too big of a CSS/dreamweaver chunk; so those ideas are on the back burner.