Interaction Design

grey box method for Simple Machines

In explaining the gray box methodology Jason Santa Maria’s article he said, “I plotted out all of my content areas with numeric values and made sure that the flow of content and structural hierarchy are in place.” I tried to follow this practice the best I could. Most of my grid is placed at numeric values, and some are placed based off of aesthetic. The best thing I got out of this step was to get back to my designer roots.

While sketching, the end vision seemed more and more out of reach. The Lynda.com videos on CSS for Dreamweaver made it worse. The realization that I’ve never made a website before got more and more scary. This step helped me get focused again on the designing. I was able to get to my comfortable zone of hierarchy, placement, and plotting a course for this site to get up and running. If I can design it, then I’ll find some way to make it work.

I really wanted a good Idea of how things would be layed out, so I took the liberty of creating a mock navigation bar, and placing Lorem Ipsum text. Plotting it out this way gives me a really good idea of how things will look, but also showed me what I was neglecting and allowed me to solve problems. One problem being how to incorporate a sub-navigation (a site for each type of simple machine) in with the primary navigation (a site for the types of simple machines). I also learned that more sketching to solve problems should’ve been done.

So far I think this will work, because this is what I was envisioning, but I’d love some feedback!

———-

While working on the typography I revised my grey box; you were right with your critique, the type was both overwhelming and parts were too small. You can also view my type choices on the content that will be on the actual page.

For this lab I looked through various websites and sketched ones I thought were well designed.

To do this I looked at websites I use, or visit regularly . I would choose the website and start sketching. I come from a drawing background, and while sketching was concerned that the inaccurate proportions would allude to a badly designed webpage. Departing from the sketches and coming back to them, I believe they portray the layout of each page accurately. They could, however, have been drawn larger and incorporated more detail.

The use of value is something that I believe help websites. Even clean white pages like ooyala.com uses faint value changes to help the user navigate the site.

I am personally more attracted to sites that do not overload their sidebars and even backgrounds with Ads. I believe that ReadyMade.com had a good balance of ads and information for their site. Even though there was a banner ad at the top, it was easily skipped, and my eyes went strait to the title and content.

When I went to saddle-creek.com, a record company’s website, I noticed that the type was very small, but still very affective. There is a lot of room to play in designing websites, but all decisions must pertain to the intended audience. I can’t imagine a site with extremely small type working for a site about Medicare.

I looked at a couple of sites that had video on the main page or banners made of flash. Some of them worked, and I sketched them, and others didn’t. I decided that the reason some worked was because they were incorporated into the whole design, not a distraction from it. For example, the design firm, Sandstrom’s site www.sandstrompartners.com; is really creative and pertains to its intended audience, but it is still hard to navigate. The design is based on the user’s use of the back button. Invisableman.com, a blog for artists to collaborate, has a flash banner at the top, and while it makes the site interesting, it does not interfere with the user’s experience.

A well designed website is not achieved with flash or interactive gimmicks, but with the use of traditional design elements, always keeping in mind the audience.

The thumbnails I have on paper have been racing through my head during the entire research process. The sites are very pictorial based with minimal text.

While sketching I was able to use the wire frame I had already made to easily map out elements on the different types of pages. I was also able to see what information in my content was missing and needed to adjust my wire frame to accommodate. There are many variations based around the same style because of this; I would draw and forget elements needed on that page and needed to figure out how to best incorporate it.

I also drew upon popular websites for ideas on how they put things together.

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.

In this step of the assignment process I looked at everything at a wide angle. I didn’t just think about learning websites for kids, but all websites geared for kids. I haven’t been in the 5th grade for a long time, and decided I needed to know 2009′s 5th graders a bit more than what the state Board of Education expects of them. I also didn’t just look at the state’s expectations, but what are the teachers’ and parents’ expectations? Since this is going to be a live site, and not just a printed theoretical web design, I want this site to really be geared to all those involved in the education process. My explanation for this step is relatively long, but I believe that looking at all aspects in the beginning will ease my process later on.

In an educational website geared towards assuring 5th grade students are learning science principles based on state standards, I believe my client would be anyone down the line starting with the state’s Board of Education down to the teacher and parent. The site’s target audience would be 5th graders, but I also believe there needs to be information and resources for the teachers and parents so they can assure the child’s learning. In previous research I have found that during the pre-teen years (ages 10-12) are the years that kids start to yearn for independence, hence the success of these websites. It is the time when Generation Y kids are becoming more connected to mobile devices; concerned more about what clothes they’re wearing than what they’re learning in school. For me, it is vital that parents and teachers can also get information from this website to better their child’s education.

My research started not with looking at kids scientific websites, but with what sites do 5th graders actually go to. This Yahoo!Answers post was helpful. I found the sites listed in those answers to be extremely interactive and engaging, inviting kids to post their own videos on icarly.com, entering contests at disney.com, or creating your own pet and taking care of it at neopets.com. The sites are colorful and use a lot of moving imagery. The 5th grader expects my site to be modern and engaging. He isn’t interested in clip art or long paragraphs. Nor is he interested in staring at a screen, but working with what’s on the screen. He wants to be surprised and he wants to bring home something from the screen.

The majority of other educational websites for kids are very boring compared to the popular sites. Design wise they are very flat and outdated (ie. MIKIDS for YOUR KIDS!, ) A good site, Edheads – Simple Machines Activity was included a really good game, but the explanation of what simple machines are had to be discussed by a teacher beforehand.

The client expects the child to learn the state requirements.

I chose to use the state of Oregon’s requirements since that’s where I am from, and I chose to use their Engineering Design which states:

Engineering design is a process of using science principles to make modifications in the world to meet human needs and aspirations.

The outcomes to this:

1. Using science principles, describe a solution to a need or problem given criteria and constraints.
2. Design and build a prototype of a proposed engineering solution and identify factors such as cost, safety, appearance, environmental impact, and what happens if the solution fails.
3. Explain that inventions may lead to other inventions and once an invention exists, people may think of novel ways of using it.

Earlier I cited websites geared around Simple Machines, this is because this is one project I remember doing at this age. The principles and activities related to those will encourage the learning of the expectation.

Like most people, I have been to websites where information is sporadic and you have to tour the entire site before you reach what you initially went there for. Thus, organization for a web designer is a fundamental necessity.

The task of organizing an array of articles about Pygmy Goats covering a wide range of topics seems like a daunting task. As a visual learner and thinker that task was simplified by having tangible articles to organize by category.  Our group organized the articles into the categories of, Basic Information, Pygmy Goats as Pets, Farming, Medical, and Miscellaneous.

Our group decided on a hierarchy scheme to work with before designing. When we collaborated with our individual designs we chose the overall design that had the most color and was the most intriguing. The most color was achieved by utilizing the hierarchy the way it should be; by breaking up information enough that the text doesn’t look daunting and boring, while still making the text similar enough that the information looks like it goes together.

The overall look was intriguing not only with the use of hierarchy to create color, but by the layout. The main text was on the right column with appropriate margins and simple graphics and navigation stayed on the left.  Allowing the reader to focus on the main text but provided easy recognition of what was being read.

Some of the finer details were overlooked in the technology part of the assignment. Things such as labeling with lowercase, <h1> instead of uppercase, <H2>; or using different versions of InDesign held up the process a little bit.

The assignment was a very appropriate stepping stone in learning the organization process and beginning steps of web design. I am confident that if I were given this assignment again my group and I would complete it with no hold ups or confusion.