Interaction Design

The structure so far has had a few revisions, and I am sure it will have plenty more.

The site map is very generalized and I already have some ideas that my cause a few alterations in the structure. You have to put something down sooner or later, however, so this is the current snapshot.

Current Site Map

The updated wire frame is a bit more accurate in depicting the sites layout. It is still a little basic as I want to use the standard web conventions as much as possible. The creativity comes in on how to effectively tweak it enough to make it interesting, but not to deviate too much that it becomes confusing.

Current Wire Frame

The time has come to create a personal portfolio. My clients for this site will be potential employers looking for a web developer. My target audience consists mainly of three different users: corporate recruiters, business owners, and web development firms. My assumption is they are going to want a clean, creative interface that quickly displays the skills and experience they are looking for in an impressive way. My job, of course, is to give it to them.

Hence, the required outcome of the site is that the potential employer must be able to easily located their desired information, and be persuaded to contact me. So how is this to be done? Well I looked at a few other portfolio sites and found some interesting things, both good and bad. Many of the sites I observed had a few common elements, mostly using JavaScript in place of flash and having interactive elements on the page.

http://www.bjornenki.com/

The concept for my site was originally to emphasize my experience as a designer in addition to being a developer through a hybrid themed site. The more I look around, however, the more common this skill combination seems to be. The thought of creating a hybrid site may still be applicable, but I fear that my assumed selling point has just been watered down immensely. Evidently, I will need to revise my strategy a little to find emphasize another strength that will strongly set me apart from the competition. Back to the drawing board.

Or rather I say, just a shell. The site is built and fully functional (although you may get a little detour through the search engine…).

There is of course a need for much improvement as the visual implementation is still quite rough, and the animation of the sliding panels is missing. The main gaping hole, however, is the content; or actually the lack thereof. I am hoping since the site is firmly structured and the content parameters are now well defined, that plugging in the content will be a lot simpler than everything I just went through to get it up. We’ll see how it goes.

Anyhow, here is the link: http://phillip-roberts.com/science/

I found the Gray Box Method to be extremely useful transition. Usually after the sketches, I lose myself in trying to push pixels around here and there as I try to mold and design something that is a close equivalent to warm jello (constantly changing shape and form). The Gray Box Method allows me to put a solid foundation underneath that won’t flex upon every aesthetic whim. I have the cake baked and solid; now I can focus on frosting it (well, almost… technically it’s still not online and functioning, but you get the picture).

The following are the Gray Box models of both the entry-level home page and a main-level page for the site. The site name is Science Tkt (standing for Science Tool-kit-terminal) in connection to the idea of the design. I know there is a Science TKT certificate, but we’ll call the difference between the capitalization good enough.

The site will be designed to appear as though the viewer is looking at a computer-type terminal that they can access to learn the basic information (or tools) to start exploring the world of science. The home page displays as the terminal cover which retracts to reveal the desired main page layers below (which in turn pull out or retract) as the student navigates through the site.

Home Page

Main Level Page

Sketching is always a great way to get all those nebulous design ideas down on paper and out of your head (for good or bad). I helps to bring out the obvious that you never noticed before. For example, when I was planning my navigation design from just my site map, I overlooked the minor detail that the home page was actually a page that I needed to have a navigation button for (oops). Sketching also forces you to take a look at other possibilities, forcing you to come up with new ideas when you don’t think any are left.

Here are my three layout selections from my sketches. The A Scheme is more of a traditional boxy look and feel. Scheme C is the opposite extreme, designed to have all elements practically floating above the background for an open and airy feel. My actual selection, for the time being, is the B Scheme. It will play off the idea of having a “Science Kit” and will be designed to visually represent a metal case with the web pages enclosed within. Rather than using tabs for the illusion of depth in the sight, the pages will actually slide up to reveal the ones beneath.

Thumbnail Sketches

Planning out my site map helped me to actually flesh out what pages my site consisted of. Before drawing it out, the information to meet the objectives was a little ambiguous and I wasn’t sure if I any of the content was missing. The process of creating my site map helped me to see some major holes in my information and where I had excess content not related to the objectives.

The following show the general relation of the main pages of the site and the sub navigation categories of each page locally:

Site Map

The wire frame has undergone a little bit of revision. My aim for this site is to stick to the main web conventions as much as possible. I imagine 5th graders have a ton of experience surfing the web and, by using the conventions, I hope to make navigation of the site as intuitive as possible. My main goal in doing this is to keep their attention on the content, rather than trying to figure out how the site works.

The initial wire frame had a side bar on the right. After playing around with the design of the main content, however, I didn’t see a need for it. The current design is as follows:

Wire Frame

My client for this project will be the Colorado School Board with the target audience as their 5th grade students. The main objective will be to create an informative resource that will help the students learn the science concepts in the following objectives:

1. Identify the appropriate scientific tools that are used to gather data for an investigation.
2. Identify the appropriate metric units for length, temperature, mass, and volume.
3. Represent data and evidence from an experiment in visual form.

http://www.teachingmeasures.co.uk/mass/classdial/dialdrag.html

http://www.bbc.co.uk/schools/ks2bitesize/maths/shape_space/measures/read2.shtml

As part of my research process, I conducted a brief competitive analysis. One of the more obvious strengths I observed from my visual audit was interaction. Most of the sites I visited were largely, if not completely animated.

The strength of the interactive sites is that it creates a very strong, memorable experience that will stay with the students. It also serves as a powerful testing tool to check the learner’s understanding of each concept.

The downfall of the all flash site, however, is the forced spoon-fed delivery of information. This is where the strength of the static sites comes in. The ability to search, copy and paste, and jump to the desired information offers a power of its own in the learning process.

My conclusion is that it would be better to leave the style of each site within its own stronghold: the static for teaching, and the dynamic for testing. Following this method would incorporate the best of both worlds to give the student a richer educational experience. The scope of this assignment is focused upon the teaching of information and ideas to the students, so it will follow the implementations of a more static design.

Given 50 random articles, our group of designers were to sort, revise, and collaborate to create one compiled little Pygmy Goat book. There was of course the usual unexpected challenges, but that is what makes it into one great learning experience.

This was project was unique for me from the beginning.  In the past I have always been given set content for the project or gathered it myself. With this project, however, we practiced something more like what you would receive in a real world situation. We were given a random collect of information and to sort through and decide how to best make some logical sense of it.  We then made decisions on how to put all of those pieces into an actual presentable order for our content.  I felt this was a very effective exercise as it taught us that you usually will not be handed some body copy that you can just paste in and format.  In the real world there is a lot more work and preparation that takes place even before the design process begins.

Each member of our group was assigned two articles of the book to layout and design.  We were then to meet and combine our files into a single book.  Consistency was to be achieved by conforming to similar paragraph and character style rules that we had agreed upon earlier.  Once combined, we would select the article with the best overall design and synchronize the other articles to conform to its styles. The end result would be a streamlined book that seamlessly appears to have been laid out by a single designer.

Sounds like an great streamlined process, right?  I thought this was an awesome idea and that it would only take a half hour to choose the design, synchronize and add the finishing touches. This was my first collaborative project and I quickly realized that I had a lot to learn. Communication is a vital instrument in this situation and unless it is highly maintained throughout the designing process there will be conflicts. Everyone has their own style, taste, and way of thinking. Even though there may be an agreed standard, how that standard is interpreted by each individual is entirely different. The actual synchronization process actually took several hours of tweaking to get each article to match the template. The leading factor to this complication I feel was not so much on what we had agreed upon, but the things that we hadn’t considered.  There were many layout and other elements that were not discussed or realized until we were faced with the obvious differences.

Overall it was a powerful learning experience that helped me better understand working collectively as a group. It made me aware of just how important constant communication is in a collaborative process and that it is not just a one step deal. It takes a bit more work than I had realized, but in the end it is amazing to see everything comes together to make the final product.