Playtest #2

Today I did my second playtest. I wanted to do this earlier, but earlier appointments failed. Out of this playtest I wanted to get information about what kind of gestures were linked to musical changes. So how do children move when; - They want to make the music more busy or calm, - They want to make the music louder or quieter, - They want to stop the music. I used two short loops out of Griegs Hall of the Mountain King. One short loop was very calm, the other was very busy. I gave the tester one conducting baton (selfmade). The children sat around in a circle on their chairs. One child was conducting in the centre of the circle (confronting their 'crowd', not my laptop where the music came out of), I let the child conduct for a short time, asked them what they wanted to do (make the music louder or quieter of busy or calm), or asked them to do something. They had to decide how to gesture this. When they were done, they chose somebody else out of the circle to play with the baton. Children were very eager to be chosen. Funny thing was that one girl didn't pay attention to how she was holding the baton and the other kids explained her how to, and argumented this by explaining where the grippiece was for. This clearly shows that children of the age of 6 are aware of affordances. I taped the whole playtest, however I'm not allowed to put images of the children online, I'm only allowed to use the tapes for documentation of my research. For the interaction I tried to make logical changes in music according to the movements of the children. The music can be more busy or calm, louder or quieter or stopped. This is all done by hand, I don't have a program yet. But as shown in the post before, the technical prototype is on its way. Results: - Children all use the same movement to stop the music. This is a quick, tight, decisive movement of both hands with the baton down. - To start the music most children use the same movement to stop the music. - Children hear that loud/quiet and busy/calm are two different things, but are not conscious of how to make different movements of this. However: - Unconsiously they do make different movements for this: - To change the volume of the music they make bigger or smaller movements - To change the music to calm or busy they make quicker or slower movements - The children like the music itself, but after a while (7 minutes) the children in the circle found to music to be boring. This was because I was only switching between two very short loops, so it is logical that after 7 minutes of watching children play, music gets boring. But this does show that the music needs to have a lot of variations, even in the same playstate. - Children asked after 7 minutes of watching somebody play on the same music to change to music to something else. This shows that it is very good to give the ability to choose different musical pieces.

First technical prototype!

Let me introduce you to Mikail Pehlivan and Raymond Reints, they make the technical prototypes for my concept. This weekend they have finished the first prototype. I'm already very happy with the result, this prototype already shows that my toy will be able to recognize direction and it works very smoothly! Sort of feels like my baby sais 'mommy' for the first time ;)

Wii Music

http://www.youtube.com/watch?v=hjldhlO9SI0

7 essential guidelines for functional design

http://www.smashingmagazine.com/2008/08/05/7-essential-guidelines-for-functional-design/


7 Essential Guidelines For Functional Design
By Dustin M. Wax
August 5th, 2008 Guidelines, Principles, Web Design 52 Comments
Look at what you’ve made. Beautiful, isn’t it? But does it work? For whom does it work? Of course you can use it, but can anyone else? In short, is it functional?
At the heart of every piece of practical design, whether it be a website, product package, office building, manufacturing system, piece of furniture, software interface, book cover, tool, or anything else, there is a function, a task the item is expected to perform. Most functions can be achieved in a variety of ways, but there are some basic elements a designer needs to take into account to create a product that best fulfills its intended function.
These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome. (Functional design is also a computer modeling technique, but that’s not what we’re discussing here.)
In order to create a product that works, there are seven questions you should keep in mind about the product you’re designing, who will be using it, and how they’ll be using it.
1. Consider the product’s goal.
Consider the screwdriver. The goal of a screwdriver is pretty straight-forward: to drive screws. Although there’s certainly a lot of room for innovation in screwdriver design — there are screwdrivers with more ergonomic handles, ratchet-assemblies, magnetic tips, and exchangeable heads — ultimately everything in a screwdriver’s design is aimed towards the accomplishment of that single goal: driving screws.

Ultimately everything in a screwdriver’s design is aimed towards the accomplishment of that single goal: driving screws. Image source.
Now, consider a website like Amazon.com. What is the goal of Amazon’s website? Amazon has a lot of different uses, some intended by Amazon and its designers and some not intended — you can look up reviews, compare product prices while you’re in a store considering a purchase, promote your brand by leaving lots of reviews, scam shoppers by creating fake storefronts, collect images of book covers for a school project, search book text for half-remembered quotes, and so on.

For the folks at Amazon, the website has one purpose: to sell stuff. All the features that allow those other uses were put in place as ways to sell more products.
But none of those are the reason the site was built. For the folks at Amazon, the website has one purpose: to sell stuff. All the features that allow those other uses were put in place as ways to sell more products. (And it seems to be working!)
2. Consider who will be using it.
Perhaps the single most important consideration in the design process — and the one most often forgotten — is the intended audience for the product. What works perfectly well for one user might be completely dysfunctional for another. And if the hoped-for users fall more into the second category than the first, you’ve got a problem.
Think about the way your parents or grandparents use their computers. Anyone with a bit of tech-savviness has probably fielded dozens of "tech support" calls from family members who are simply baffled by things like adding an email account to their email program, downloading family pictures from the Web, or dealing with a too-full hard drive.

Since CNN’s web-site is supposed to be used by huge and versatile audience, it has to work equally well for all its potential users if it’s to accomplish its goal.
Why do people have so much trouble with their computers?
They don’t know enough about how computers work.
They don’t have enough experience with computers.
They don’t have time to figure things out.
They don’t enjoy tinkering until they find a solution to a computer problem.
The manuals are written in a dense, uninviting language that they find boring and difficult to comprehend.
Considering the kinds of problems they have can give us a clue about the kinds of questions designers should be asking about their audience.
What kind of knowledge do your users bring with them?
How much experience do they have?
What kind of time do they have? Are they looking for a leisurely diversion or do they want to get in and out fast?
What kind of personalities do they have?
How much support will they need, and what form should it take?
Obviously there are likely to be several audiences for any given product. Plenty of computer users have the knowledge, experience, and personality types to easily do whatever they choose to do on their computers. If you’re designing a niche product — a website for Linux users, for example — perhaps you can get away with directing yourself towards only one, narrow audience. In most cases, though, a product has to work equally for all its potential users if it’s to accomplish its goal.
3. Consider what your audience intends to do with it.
As we saw in the case of Amazon.com, there are a lot of ways that users use a product besides those that directly fulfill the product’s main goal. In fact, every user comes to a product with his or her own intention — and they are rarely the goals that designers have in mind. For example, nobody in the history of humankind has ever wanted to record what was on channel Three between 9 pm and 10pm on Thursday the 27th — yet for years that was how VCR designers insisted we program our VCRs. No surprise, then, that few people programmed their VCRs.
Instead, what people want to do is record House tomorrow night. Likewise, your dad doesn’t want to configure his POP3 and SMTP settings. He doesn’t even want to send and receive email. He wants to send pictures of the baby to Aunt Jill in Iowa. Engineers and designers have long suffered from a tendency to substitute concrete specifications and processes for fuzzy user behaviors — but users don’t do that.

Engineers and designers have long suffered from a tendency to substitute concrete specifications and processes for fuzzy user behaviors — but users don’t do that.
Adequate knowledge of who your audience is requires some sense of what their intentions are and how they are going to think about your product. That’s what Tivo did when they replaced the complicated process of recording a show on a VCR with a process that better reflected their users’ intentions — just select a show you want to record and hit "Record".
4. Is it clear how to use it?
The best design, as often said, "speaks for itself". It is immediately clear — at least to its target audience(s) — what a product does and how to use it. Clarity is key to functional design. Probably one of the best-designed objects in the world is the ball. With minimal instruction even infants can use it!

In contrast, look at the website above. That’s the home page for Chipotle, the Mexican fast food restaurant known for its use of free-range, organic, and locally-grown ingredients. Not that you’d know that from the homepage. What you know is a) they have a logo, and b) there’s something you should know about jalapeño peppers. If there were no food scare involving jalapeños, you’d see only the logo. What do you do? We can assume the site has a goal — probably to get you to buy some tasty Mexican food — but how do you, the visitor, fulfill your own goal of finding what you want to know about Chipotle?
This is a classic example of what Vincent Flanders calls "mystery meat navigation" (presumably free-range, organically-grown mystery meat), a website navigation system so clever, so stylish, that visitors have no idea what the site does or how to do it. Make your product difficult enough to understand and it won’t get used at all — which means it doesn’t achieve its goal, which in turn means it doesn’t function.
5. How does your user know it’s working?

Remember in the Bad Old Days of the Web, when you’d make a purchase online and the "Submit" button would say underneath something like:
Please press the "Submit" button only once. Pressing more than once will duplicate your purchase.
We’ve come a ways since then, but it’s surprising how many times you still come across a website feedback form that doesn’t tell you when your message has been sent, or a search form that doesn’t tell you that it’s working on your request.
This problem is by no means limited to the online world. How often do you double-check to see that your alarm clock is set to go off, and at the right time, before you can relax and go to sleep? Or maybe you’ve run into this problem: you hit "Program" on your CD player (assuming you still have one) and key in the tracks you want to hear, but aren’t sure whether to hit "Program" again or just hit "Play" — and if you hit the wrong one, whether your program will be lost and you’ll have to re-do it.
These are all examples of inadequate feedback — it’s not clear whether you’ve completed the task you inteded to do or if there are more steps still required. While technically a product is functioning even if you don’t know it’s working, it’s not functioning well from the user’s standpoint — and products that don’t function well tend not to create very loyal users.
6. Is it engaging to your users?
One of the great products of recent years, at least in terms of engagement, is the Blackberry. Blackberry owners can’t stop fiddling with their devices — they check their email, flick the trackball around, check email again, send a text, scroll around the home screen, and then do it all over again. And again.
It’s no accident it’s earned the nickname "Crackberry."

Usability testing and paper prototyping are common methods to understand the way your target group will interact with you web-site and find out if it is engaging to your users. Image source.
Good design draws users in, whether through visual appeal, feel, ease of use, or sheer amazement. Anyone who has ever picked up a well-made hand tool and felt the desire to build something has experienced this — the tool just feels right.
This is, in part, the aesthetic value of the design — we are naturally drawn to things we find pretty. But aesthetics are hardly the limit of what makes something engaging. There are plenty of websites out there that are downright hideous — but they work. Those long form sales pages that litter the Web hawking "get rich quick" programs and miracle cures (like this landing page which won the SEOmoz landing page contest last year) are as ugly as human ingenuity can make them — but they consistently succeed in leading visitors (at least the kind of users that the pages are designed for) to the inevitable sale.
7. How does it handle mistakes?

How often have you visited a web page, realized it didn’t have the information you were looking for, clicked the "Back" button, and ended up on the same page again?
You made a mistake, to be sure — you clicked the wrong link — but that happens. It was the designer, though, who decided to make your mistake difficult to undo. Good design takes into account the possibility that users make mistakes.
Unless your only desired user is a member of that very small demographic of people who don’t ever make mistakes, your design should accommodate and even anticipate mistakes as much as possible. Web designers have come up with all sorts of ways to accommodate visitors’ mistakes, from persistent menus and "breadcrumbs" to 404 pages ("Page Not Found" pages) that link to the pages the websurfer was likely to have been looking for.
Designers who don’t make room for — and offer solutions to — users’ mistakes create non-functioning products.
Conclusion
Design is necessarily a relationship between users with problems to solve and designers with solutions to offer. Too often, though, users are left out of the designer’s considerations. Whoever designed the Chipotle site, for instance, had no conception of how any part of their target audience would approach the site. They had a clever idea — "it’s minimalism, man!" — and ran with it, to the detriment of potential diners, and possibly to the detriment of Chipotle.
Unless your specialty is creating concepts that have no possibility of being made into actual products, the ultimate goal is to design things that will be used. Think about how and why your product will be used, and by whom, as a central part of the design process to assure that your designs not only can be used, but will.

affordance and educational games

Reading http://paaralan.blogspot.com/2010/09/affordance-and-educational-games.html
An update will soon follow

Conceptual Models as Stories

What are conceptual models? I think the easiest way to connive of them is as stories, stories in context. A model is a story that puts the operation of the system into context: it weaves together all of the essential components, providing a framework, a context, and reasons for understanding. Without this story, without this conceptualization, the operation of something becomes a set of memorized actions, but without reason or purpose except "this is how it is done." Although we do operate many of the devices in our lives as learned operations, if there is any complexity to the device at all, then those operations are difficult to learn and prone to error.

Communication & Context: Design as storytelling
The story provides the context that makes the roles of the various accoutrements cleas and distinct. Without the story, without the xontext, their purpose might not be discovered.


For people to use a product succesfully, they must have the same mental model (the users model) as that of the designer (the designers model). But the designer only talks to the user via the product itself. So the entire communication must take place through the system model.
(Norman & Draper's User Centered Design System Design (1986)

De Souza: We need to provide reason to users, not methods (like userguides). This way the user fill find the task of uncovering the conceptual model much easier.

Human beings are explanation machines. We are always trying to understand the world around us, and we make up stories to explain the occurences we experience.

People are spacial. We remember where things are in space.

Reference:
http://www.jnd.org/dn.mss/design_as_communicat.html
Rheinfrank, J., & Evenson, S. (1996). Design Languages. In T. Winograd (Ed.), Bringing design to software (pp. 63-80). New York: Addison-Wesley (ACM Press).

de Souza, C. S. (2005. The Semiotic Engineering of Human Computer Interaction. Cambridge, MA: MIT Press.

Old Man In Nursing Home Reacts To Hearing Music From His Era

http://www.youtube.com/watch?v=NKDXuCE7LeQ&sns=fb

This is what inspires me about music, what it can do to somebody, or to everybody actually.
You can get so much different feelings out of it which can affect your state of mind right away.
This old man hears music from is own era and just gets alive again.
There is also something of a nostalgic feeling about this, why the man comes alive again.
And you can create nostalgia, I hope that with my toy I can also create nostalgia.
Designing a toy, let children have a lot of fun with it and 20 years later they can look back happily thinking about how much fun they had with my toy. Just like I do with Furby, Barby, Clay, Lego and Duplo and ofcourse my Thunderbird Island.

Caine's arcade

http://vimeo.com/40000072
Very inspiring

Visual communication of function, affordances or product semantics???

I've asked around, on facebook, classmates, people from different backgrounds, architectures, game designers, interaction designers, game artist, illustrators.. but it is very very very hard to find information about how to create function in your design. My research so far has only been about form, but my research actually is about function. This is not because I'm not aware of this, but because it is very hard to find the information I need about creating function in your design. And I think this is a very big issue. So far during my study, I've learned a lot about creating form and using it to communicate something. This can be seen as a function, but I've never actually learned anything about communicating functions specificly. We all learned this by doing it, using the same tricks we've seen other people doing. If you asked me to design a handle, I would design a proper working handle. But don't ask me what kind of rules or principles I applied to be sure I made the right decisions to communicate the function of the handle.
Point is, I know how to create a function, but I don't understand why exactly it works that way. And I think a lot of people don't know. That is why it is so hard to find information about this subject.
Form follows function, but how DO you design function???

First thing I learned to get to information about this, is don't try to find information with the word function. Use affordances instead.

I've found some interesting articles with this searchword:
http://www.designingforhumans.com/idsa/2007/11/affordances-in.html
http://ieeexplore.ieee.org/xpl/login.jsp?tp=&arnumber=6005281&url=http%3A%2F%2Fieeexplore.ieee.org%2Fxpls%2Fabs_all.jsp%3Farnumber%3D6005281
http://ieeexplore.ieee.org/xpl/login.jsp?tp=&arnumber=5359708&url=http%3A%2F%2Fieeexplore.ieee.org%2Fxpls%2Fabs_all.jsp%3Farnumber%3D5359708
easyprague.cz/presentations/needham.ppt
http://www2.uiah.fi/sefun/DSIU_papers/DSIU%20_%20Kilbourn%20&%20Isaksson%20_%20Meaning%20through%20doing.pdf (!!!)
http://www.idemployee.id.tue.nl/g.w.m.rauterberg/conferences/cd_donotopen/adc/final_paper/105.pdf (theory about what affordances are and what product sematics are, very important)
http://paaralan.blogspot.com/2010/09/affordance-and-educational-games.html (what are affordances, clearly explained)


Interesting knowledge I found
Affordances can also be named action possibilities.
So play affordances can also be named play possibilities. I think this fits.
Again J.J. Gibson's principle of affordances. My next step is to research this principle further.
One of the ongoing "philosophical" points of contention when I was in graduate school was between the cognitive psychologists and the ecological psychologists over the theory of perception.

In a nutshell, the cognitive approach assumes that information in the world is ambiguous and cognitive-perceptual processes are required to interpret stimuli into meaningful information. For example, an object is observed through the visual system and the brain uses that stimulation in conjunction with memory to disambiguate and identify the object. This is in fact how most people understand perception to work.

The minority alternative comes from the ecological perspective ("ecological" as in a rich stimulus environment, and not related to sustainable design), which posits that information in the world is specific and sufficiently detailed to communicate information without any interpretation. That is, the visual stimulus is unique and conveys the relevant characteristics to the observer.

This contrast in approaches also emerged in the world of product and interface design over the term "affordance". The term was coined by J.J. Gibson, the father of ecological psychology, to define the relationship between an actor (e.g. human, animal) and an object or environment. For example, a flat surface "affords" sitting on, a pointy one does not. Note that an affordance is a property that exists whether it is perceived or not or acted on or not.

Product semantics is a tool in product design to generate newer, better and more meaningful forms. Consumer preference and perception of products strongly influence a product's acceptability. Both are expressed by words that may be studied using product semantics.


In Gibson’s theory of perception, an organism directly perceives the value of the environment through
affordances. By affordance, Gibson means the opportunities or possibilities of nature, which require
the act of information pickup. Within design theory, however, there is a strong tendency towards
separating perceptual information of affordances and the affordance itself. Combining theoretical
discussion with an empirical case study of a medical device, we suggest there is untapped value in
the notion of direct perception and argue that there is meaning through doing. Looking at the role
of affordances over time, instead of a person’s first exposure to a product necessitates sensitivity
toward enskilment and how people create meaning through the use of products. (Meaning through doing:
The role of affordances over time, by Kyle Kilbourn and Jessica Isaksson)

Recent years, Gibson's affordance concept has drawn many attentions in the field of
human-computer interface and product design. However, the development of affordance concept in design
practice is by far not yet matured, and the differentiation between affordance and symbolic meaning of designed
artifacts is not clear. As a result, that wrongly exercising the techniques of “Product Semantics” while
implementation of affordance concept is meant is often found in design field. Such confusion not only can
hinder the development of ecological approach in design research, but also limit the potential application of
affordance concept as well.


Conclusion:
The problem is not finding techniques or principles for designing function, but to look what this function communication actually is. It now turns out that the communication of functions can be two things, one (which I already discussed) is 'affordance' and the other one (which is new to me) is 'product semantics'.
-I first need to figure out what function communication is and what an affordance is and what product semantics got to do with this.
When I've done this, I will have my own take on what function communication in toys is and what is important for this.
- Next step will be to look at all the aspect of this communication (done by both ethnography and literal research), make a very big mindmapping brainstorm and try to find a pattern in it. This pattern will (hopefully) bring me to a certain outcome that can tell what elements visual communication of function contain.
- Last step will be how to apply this.

By the way

This youtube film was my inspiration for the interactive conducting baton
http://www.youtube.com/watch?v=xrRtx67yPzE

Elements of visual design

I've researched the different elements of visual design, so that I can have a better understanding of how I can create affordances in toy designs.

Just like a composer composes his music, a visual designer composes a design. It is important to think about what you want to communicate with the appearance of your product. It is not only about designing something that looks attractive, more important is that your product communicates what it is and what it does. What a visual designer does is create behaviour.

Examples
In Art

This is a work of Rembrandt, it's called Philosophe en méditation.
It is a very clear example of how an artist uses visual elements to create behaviour. Rembrandt has made this painting so that it draws the attention of the eye in the way he wants to. There are several elements he used for this;
- Warm and cold contrast; the elements in the painting that are warm draw the eye.
- Contrast in size; Some elements in the painting are very big and undifined (the foreground), they are quite boring to look at, so you automatically don't. However, the dark space in the stairs is more interesting to the eye, because the size is contrasting to the stairs and everything around it, because those shapes are smaller and more defined.
- Contrast in shape; When you look at the painting in a abstract way, everything is devided in shapes. The shapes can point at eachother, or 'block' eachother. In Rembrandts painting you see how he used the contrast between shapes to accentuate the thinking man at the left. He head is a small circle between two big triangles (contrast in both size and shape!). At the right you can see how the direction of the stairsteps points at the person at the fire. If his back (circle) wouldn't overlap the end of the stairs, the dull side of the triangle would 'block' the directing, preventing the eye to go in the direction of the person. But the circle draws in the direction of the steps and in this way it draws the eye.

- Direction. Everything has a direction. When you see an arrow to the right, your eyes automatically follow the arrow to the right.
This can be found back in paintings as well. Direction is a very handy way to create a imaginary line that the eye follows through the painting.

- Tone is one of the most used ways to steer the eye. Your eye is always drawn to light. So if something is more light than the rest you will automatically look at it. Rembrandt was a master in this principle.

In product design

This is one of Staedtler's new markers. The design is based on a painting brush. The new design should allow looser stripes, because the original markers force a very hard grip, which makes tighter stripes. Visually the design explains directly where the product is designed for
- Shape, the shape is like that of a brush, which we all learned to paint with. Also, when using the marker, the shape directs your eye to the paper where you're writing on, it's one big point towards what you're doing.
- Out of the color of the marker you can understand what color inkt the marker has. The rest of the pencil is white, which is a neurtral color, saying that what you can write or make with the marker is only limited to your ideas.
- Direction and Repetition. The three horizontal lines first of all make the whole product more attractive to the eye, because it breaks the whole vertical shape, creating tension in the balance (but not get it out of belance). This makes the look of the product more interesting to look it. It is also a repetition; we like to give relations to things, to understand them better. Repetitions are therefore very fine to look at. It also communicates that it can be used as grip to hold your marker. This element also comes back in the shell of the marker. Here you've got the same repetitive lines, only vertical, which also gives you grip.


Visual design for products can be devided in elements of design and principles of design.
Elements of design are visual pieces that make up a drawing. Principles of design are ways to use elements of design to bring them together in one design.

Elements of design
Line
A fundamental mark or stroke used in drawing in which the length is longer than the width. Two connected points form a line and every line has a length, width, and direction.
You can use lines for design in three ways:
- Contour line: A line that defines or bounds an edge, it could represend a fold, color/tone change or the outline of something.
- Divide space: Use of negative space to define an edge of a space
- Decoration: Lines are used as patterns or stripes to decorate or to create a shadow/tone difference (hatching)
Color
Color plays a very important role in elements of design (it's a researchsubject on itself, so I can't research it as much as I would like to). Color can be used to create drastic contrasts just as hierarchy, size, scale, and dominance can.

Types of color
- Primary color: the three basic colors which you can mix and create all the other colors with - blue, red and yellow
- Secondary color: The colors you get when mixing two primary colors: orange, purple and green
- Tertiary color: The colors you get when you mix two secundary colors, of every secundary color you can get a 'warm' tone and a 'cold' tone. For instance; red and purple creates red-purple, which is a warm purple. Blue-purple is a cold purple.
Perceptual attributes of color
Hue: The redness, blueness, greenness (etc.) of a color
Value: How light or dark a color is. You can add black or white to a color. This makes the color lighter or darker, but also 'breaks' the color, reducing the saturation
Saturation: The brightness or dullness of a color.
Ways color can guide the reader
Aid organization with a colorscheme: create a colorscheme/strategy and stay consistent with these colors.
Give emphasis by creating a hierarchy or color that leads to important information (like Rembrandts tone contrast).
Provide direction by creating relationships/contrast between elements. For instance warm en cold. Rembrandt used cold colors for the foreground en warm colors for the background. By creating this contrast people understand that there is a difference between cold and warm.
Shape
A shape is defined as an area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, color, or texture. [Kovalik] All objects are composed of shapes and all other 'Elements of Design' are shapes in some way. There are two kind of shapes:
Geomatric Shapes (Mechanical): These are the shapes that can be drawn using a ruler or compass. Mechanical shapes, wether simple or complex, produce a feeling of control or order.
Organic Shapes: Freehand drawn shapes that are complex and normally found in nature. Organic shapes produce a natural feel.
Texture
Meaning the way a surface feels or is perceived to feel. Texture can be added to attract for repel interest to an element, depending on the pleasantness of the texture. There are two ways to perceive the word 'texture':
Tactile texture: The actual three-dimension feel of a surface that can be touched.
Visual texture: The illusion of the surfaces peaks and valleys on a flat surface. Concept artist, for instance, use photo's of textures in their work to give the illustion of texture.
If a texture repeats a motif it can also be called a pattern.
Space
In design, space is concerned with the are the design will take place on. For a two-dimensional design space concerns creating the illusion of a third dimension on a flat surface.
Ways of creating the illusion of space:
Overlapping: Where objects appear to be on top of each other. This illusion makes the top element look closer to the observer. There is no way to determine the depth of the space, only the order of closeness.
Shading: Adding gradation marks to make an object of a two-dimensional surface seem three-dimensional.
Linear Perspective: A concept relating to how an object seems smaller the farther away it gets.
Atmospheric Perspective: Based on how air acts as a filter to change the appearance of distance objects (a misty environment creates a lot of atmospheric perspective).
Form
Form is any three dimensional object. Form can be measured, from top to bottom (height), side to side (width), and from back to front (depth). Form is also defined by light and dark. There are two types of form, geometric (man-made) and natural (organic form). Form may be created by the combining of two or more shapes. It may be enhanced by tone, texture and color. It can be illustrated or constructed.
Form follows function; Form refers to what something looks like, and function refers to how it works.

Principles of Design [The Elements of Graphic Design, Alex White]
Unity
A good design contains elements that lead the reader through each element in order of significance.
Point, Line, and Plane (PLP)
Balance
Balance in design is the distribution of elements across the design. Balance is a visual interpretation of gravity in the design. Large, dense elements appear to be heavier while smaller elements appear to be lighter. You can balance designs in three ways:
-symmetrical balance: Symmetrical balance is achieved by placing elements in a very even fashion in the design. If you have a large, heavy element on the right side, you'll have a matching heavy element on the left. To prefent the product from becomin too dull (because it's too symmetrical), use different elements on either side to create balance, you don't need to mirror everyting.
-asymmetrical balance: If you think of your design as being on a teeter-totter or seesaw, a lighter element can balance a heavier one by being further away from the center of gravity. You can also use color or texture to balance an asymmetrical design.
-discordant or off-balance: Sometimes the purpose of the design makes an off-balance or discordant design work well. Designs that are off-balance suggest motion and action. They make people uncomfortable or uneasy. If the content of your design is also intended to be uncomfortable or make people think, a discordantly balanced design can work well.
Scale
Using the relative size of elements against each other can attract attention to a focal point. When elements are designed larger than life, scale is being used to show drama.
Dominance
Dominance is created by contrasting size, positioning, color, style, or shape. The focal point should dominate the design with scale and contrast without sacrificing the unity of the whole.
Similarity and Contrast
Some key aspects of a well designed document include dramatic contrasts, scrupulous similarity, and active white space. Planning a consistent and similar design is an important aspect of a designers work to make their focal point visible. Too much similarity is boring but without similarity important elements will not exist. Also, without contrast an image is uneventful so the key is to find the balance between similarity and contrast.
Ways to Develop a Similar Environment
- Less is more: Keep it simple and eliminate clutter. Do not fill white spaces with garbage.
- Build a unique internal organization structure (a wireframe).
- Manipulate shapes of images and text to correlate together, let them interact with eachother.
- Express continuity (stay in line with your style)
- Develop a style manual and stick with the format.
Ways to Create Contrast
Space
-Filled vs Empty
-Near vs Far
-2-D vs 3-D
Position
-Top vs Bottom
-Isolated vs Grouped
-Centered vs Off Center
Form
-Simple vs Complex
-Beauty vs Ugly
-Whole vs Broken
Direction
-Vertical vs Horizontal
-Stability vs Movement
-Convex vs Concave
Structure
-Organized vs Chaotic
-Serif vs Sans Serif
-Mechanical vs Hand Drawn
Size
-Big vs Little
-Long vs Short
-Deep vs. Shallow
Color
-Grayscale vs Color
-Light vs Dark
-Warm vs Cool
Texture
-Fine vs Coarse
-Smooth vs Rough
-Sharp vs Dull
Density
-Transparent vs Opaque
-Thick vs Thin
-Liquid vs Solid
Gravity
-Light vs Heavy
-Stable vs Unstable
Movement
Implying that an object is moving in a direction through space (of the page). This principle suggest speed, instability, or a passing event. Movement seems more dynamic when depth is implied.
Rhythm/Pattern
Rhythm in design is also called repetition. Rhythm allows your designs to develop an internal consistency that makes it easier for your readers to understand. Once the brain recognizes the pattern in the rhythm it can relax and understand the whole design. Repetition rarely occurs on its own and so it embues a sense of order onto the design.

Rule of Thirds and Balance
The rule of thirds says that most designs can be made more interesting by visually dividing the page into thirds vertically and/or horizontally and placing our most important elements within those thirds. Take this concept a step further, especially in photographic composition, by dividing the page into thirds both vertically and horizontally and placing your most important elements at one or more of the four intersections of those lines.



References:
Books:
Visual Design Fundamentals
Alan Hashimoto & Mike Clayton

The Elements of Graphic Design
Alex White

Sketching - The Basics
Roselien Steur

Visual Literacy
Cindy Kovalik and Peggy King

Internet:
http://www.about.com/#!/editors-picks/

Working on my presentation

Working on my test mockup presentation for my supervisor, Tarek Atrissi.
It's a very good way of writing down your progress and get a clear view of what you've done and what needs to be done (or what needs to be improved). I'm quite content with it, although I hope I can get another playtest done tomorrow. I'm still waiting for a confirmation of my testclass teacher and I'm waiting for a music loop that is made for the test at the moment.

Playtest #1

Friday, march 30, I've done my first playtest with the conducting baton.
I went to a school, to a class full of 5 and 6 year olds. I picked three children randomly (two boys and a girl).
I had one conducting baton and I used Griegs' Peer Gynt, At the wedding as test music. I changed the music (tempo and volume) myself according to the movements the children made with the conducting baton (with Virtual DJ). Later on in the test I skipped through the music to active and passive parts of the music.

Out of this first playtest I wanted to learn the following things:
- Do children understand the play affordance I tried to communicate
- What kind of movements do the children make to direct the music (or to simulate a conducter)
- How do children react on the state of music (active/passive)
- Which music system (interaction) works best (tempo/volume or adaptive)
- Does the child has the feeling he or she is influencing the music with the current playtest system
- Do children like the music I've choosen (classical)
- What kind of play affordances can the children get out of this interactive conducting baton

I predicted one leap, which is that the interaction is done by myself, I am the computer. Which means that there is a chance that I can't react fast enough on the movements of the conducting baton. That could make the interaction with the music less clear.


My conclusions out of this first playtest:
- Timing the change of music is very important for clear communication of interaction
- For a clear interaction between player and music, you need clear contrasts in music and the change in music should react accuratly to the movements of the conducting baton.
- Change in tempo is not contrasting enough for children to notice.
- The children make a lot of different movements that are big and active. Most movements look a bit like ballet. Whether this is because of the music genre (classical) needs to be tested.
- When the music is too passive (or when the music stops playing), children interpetet this as a pauze, they wait until the music starts playing more active again as a cue to continue playing.
- The state of the music (passive/active) influences the movements of the children (passive/active, controlled/uncontrolled)
- Children don't like the classical music of Grieg, they think it's old fashioned and prefer theme music from children tv shows like Mega Mindy, Batman and Spiderman.
- Children notice skips in music and perceive these skips als flaws in the music (negatively).
- Children use a lot of space when playing with the conducting baton (to dance and run).
- Children turn and jump with the conducting baton, which needs to be kept in mind during technical design.
- When playing together (with one conducting baton), one child 'conducts' the other children (2 childs) and the other children dance to the music. Or they use the conducting baton as a 'firestick' to blast imaginary fire at eachother. They could also throw the conducting stick over at eachother.
- The basic interaction (the basic play affordance) is always pointing or waving with the conducting baton. So the product design communicates correctly how the player should hold the stick and what movements could be made with it.

Iterations for next playtest:
- Collect different styles of music to look at what kind of music children like best and which music they can have the most fun with.
- Try a new music system: instead of skipping through parts of music or adjusting tempo, mix through two loops of the same musical piece, one passive and one active in equal tempo. In that way I can respond quicker and easier to the movements the child makes with the conducting baton.

Research questions for next playtest:
- Does the style of movement (ballet/...) depend on the style of music that is played (classical/...)
- Do children react on constrast in music
- Do children understand that with high contrast in music and accurate reaction on their moments that they lead the music instead of the other way around
- If the music changes on the next count (which is how real directing works), is that a realistic interaction for the player or not?