The Face of Interaction

As much as I would like to continue spending my time watching TV series and wasting my time on Youtube, I figured it was time I did some actual work. I looked into navigational systems and the actual navigation of , those systems to get a scope on how interfaces work. The first and most obvious place to start was with GPS interfaces;

Simple, clean, easy to follow. I like the checked flag representing the destination as it adds character. The icons that show points of interest is a good idea as well. Perhaps a system that recognises particular shops and such and is able to provide detail on them.

Not quite as interesting as the one before, nor as easy to understand. On a basic level it provides all the information it really needs to but it could be improved in many areas.

Provides quite a shallow view of the surroundings but gives the user a better representation of what they might actually be seeing with the 3D buildings. Perhaps a zoom option that allows swapping between an overhead view and this one?

I don't like this one much at all. It is hard to follow with the use of different colours for roads without a key. At a glance I'm not too sure what direction it's pointing me in which is something a gps needs to do. If you're driving you don't have time to study a map.
Now to look at interfaces from an interactive point of view. An interface doesn't just have to be functional, it can look cool and be fun to interact with too.

The i-phone fully utilized the touch screen in having an interface that had users playing with the screen with their fingers in different ways. This made the interface fun to interact with but it was logical too; stroke this way and the screen moves that way.

The consistency of style in this interface connects all the screens together, despite the significant difference in layout of each. This is achieved by the colour scheme and transparency of the icons and the background imagery.

Although this particular interface is a bit busy the colour scheme works rather well. The balance of colour is well done to show importance and to link everything on-screen.

All the interfaces so far have been rigidly structured but this one shows how it can be achieved with a more chaotic arrangement and still work. The transparency is key in allowing so many things on-screen in this manner, otherwise icons would be lost.

First Steps

Yesterday we did an exercise to explore how many ways there are to direct someone to a specific location. We had written instructions, navigational drawings and maps, all trying to accomplish the same thing. The written instructions were easy enough to follow if they were well written but gave the least reassurance if you were on the right track or not. The other two types were visually based and harder to interpret but once we understood what was going on they made it easy to establish if we were in the correct area as we could visually compare our surrounding to the drawing.
Combining these ideas was the process we used to begin brainstorming for our navigation system. It sparked different ideas, like a system that recognises landmarks and generates directions accordingly, or having a camera-based interface that applies its instructions to what is visible through the camera.

Structure and Noise

This project is the exploration of structure and noise, and where the two collide. We set out to explore the concepts of both structure and noise and at what point they merge from one to the other. I wanted my form to degrade from an obvious structure to noise but having a set of controls that makes the change a type of 'ordered chaos'. Although the shards of the initial web are expanding and warping on their own accord, they are forced to the centre of the screen to fill the originally gaping hole. My project was successful in that looking at the final frame without seeing the others, it's difficult, if not impossible, to find any order at all.

Final Form

Having refined the code to my structured form it was time to mess with it. I found through the transformations  my focus was in the centre of the image due to the imposing dark space. I wanted to fill this space with the brightness of the fragments so that not only did the composition shift from structure to noise but the lightness of the image flipped as well.

Here I returned to the 'autumn' colour scheme I had in the beginning to see how the composition would work having a bright background instead of a dark one and although the final 'cross' that appears at the end is quite strong the overall series is quite hard to look at from its brightness.

Lastly I adjusted how strictly the random and drag components of the code acted and gained something that looked a little like this;

These will be my final forms. The colour scheme is a combination of the cobweb and frost precedents where it is highly desaturated but there are hints of blue within it. The thing I like most about this series of forms is that when looking at the first and last items there is virtually no resemblance but the two stage in between link them rather nicely. The degrading of structure to noise is heavily present in not just how the actual structure changes but the colours as well. The numerous overlaps create a range of densities, therefore a range of shades within the final one that are non-existent in the first stage. Now It's just a matter of print testing...

Interactive Objects

The Needlebox is designed to create a full touch sensory experience. The adjustable wire ‘combs’ allows the user to alter the angle at which the needles point to create an artificial ‘grain’, selecting whether they will massage or stab when stroked. These allow for the user to create their own experience in whether it will be pleasant or painful. They can stroke it, prod it, press it or whatever tickles their fancy. It is only limited by the user’s creativity. The rotating combs and hinge locks make the Needlebox a fully kinetic experience for the user as they are not restricted to just interacting with the needles but the entire box itself.

Instruction

To adjust the angle of the needles first the lock must be raised by pulling up the hinge. Then, whilst holding up the lock, the rod to which the needles are attached is rotated by twisting the non-grooved end on the opposite side to the hinge. For the lock to work the rod must be oriented that one of the five grooves is under the lock’s ridge. The lock is then dropped so that the ridge enters the groove. The angles of the needles don’t have to be all aligned as adjacent combs have been made so that they can cross one another. The two combs closest to the ends of the box can’t be adjusted as much as the others as they will hit the edges of the box.

The purpose of the needles is the sensations they create when pressure is applied to them but the method of which this is done is left up to the user to decide. For better results, apply the needles to a larger surface area.

Pre-submission Reflection... It's Too Late Now

After three days of trail and error workshop experience and a late night with a power drill I have my completed Needlebox. Looking over the completed model there are many things I would try differently if I was to refine the object further. Firstly simple things like the scale, I would like to shrink everything down to make it a bit more delicate but the primary purpose would be to bring the wires closer together so the stroking sensation is a bit more consistent. My main limitation on this was the hinge lock mechanism was the best thing I was able to produce without sculpting my own hinges, and they force the box to be a certain size. I would also want to make the grooves deeper to hold the locks better. Apart from a few minor constrution errors like one end of the box having a slight gap in the joint the final piece came out looking pretty good and overall I'm happy with the result. Plus the grain on your cheek feels way too good to be healthy...
(Pictures in formal submission)

One Step Back, Two Steps Forward

I had to abandon my crystal code as I was unable to get it to fragment the way I wanted it to. Using the same idea, however, I revisited my web code and applied some changes that had some rather cool effects. There is still a lot of room for improvement in this code to get the effect I desire but at least this is a starting point...

A little tweak here and there and the web should break down entirely instead of just stretching, plus there will be random() functions coming out of every orifice to mix things up a little. A splash of colour and a touch of love later and we should have our final.

It's Like NCEA Level 1 Chemistry All Over Again

I've been testing code like it might be guilty of something and came up with couple of interesting structures.  This first came from my cobweb precedent which provides an interesting structure that has room for development into noise. My tutor suggested I break the long lines into individual, smaller lines that can have a random() factor applied to them, disintegrating the structure the more they move. I thought the individual segments could be drawn towards a centre-point, meaning even within all the chaos there is an underlying order.

The frost crystals I was looking into inspired the next set of code that in turn gave me a new precedent once I started experimenting with colours;

And here are the samples;

This 'crystal code' really intrigues me. Over the next few days I will definitely be interested in what else I can produce with it, especially in terms of noise. I was thinking of first adding more to the structure then perhaps fragmenting the crystals by having the main bodies actually constructed of many smaller shapes.