| D O O R S O F P E R C E P T I O N 5 | |
 |
|
| Interface Design |  |
| PDF link for printable transcription | Bas Ording |
Welcome everybody I'm very happy to be here. Today I would like to show some of the work that I've been doing on interface design. It's actually work that I've been doing before I started to work for Apple computer. What I'd like to show is a variety of little demos and experiments that each deal with specific kind of interaction elements or mechanisms. They all are pretty dynamic. And they all focus a lot on behaviour and how they feel. So in a way there's quite some relationship with the presentations you saw yesterday from Jan Willem Huisman, where they showed the mouse and the throwing. Here I made a variety of little buttons and the most important thing about these is how they feel. This is not very nice, so I'll try to do little animations like this. So you get a totally different experience when you click this button. And you can change the tempo. You get a different feel to it. This one has a different colour. A slider. So in this case they're kind of out of context so they don't do anything really. It's more about how they look and feel . Things like this: I started clicking but nothing happens, so you don't get any visual clues that turn it. So I tried to do things like this, which is more obvious that you can turn them. I made many buttons just to see what works and what doesn't work. So in that sense, my process was really a play process. I did a lot of playing and just trying to figure out what is nice and what is not nice. Some more sliders ... Some more rollers … And this thing I still don't know what it is, it's kind of a weird, and you can turn it like this … It could be a way to present images, I don't know. This is a good example of bottom-up design … there's no use for it yet. This is a little cube that functions as a clipboard. So I can grab an image and stick it on there. This is a way to collect images so you can drag them into a slit and you can store them there. Let's drag some more in. And if you click here they will come out again. So you can get them back like this. This mechanism solves the problem of the space because in the other demo you saw that if there's more images finally will go out of the screen so you have a problem there. This mechanism, you can put some images in this little box - let's fill it up a bit - and when it's closed and you enter it will open automatically. And right now you can drag it like this. So you can see all the images. And you're still able to see them all - if you enter you can browse through them. So even when they're very tiny, still you can see, and you can rearrange them. This is also for collecting images; in this case you can put the images on the circle so they form a group. And you can remove images. Or add images. So they're linked to this image. And right now if I click on this it will turn so I get to the next circle. So I can build a whole hierarchy of images like this. So you can go on and on. And add more stuff. And I spend a lot of time to get everything very smooth and continuous so if you insert, there's no jumps in it. It's very smooth. This is a good example of how dynamics make the interface more clear. You see what's happening because of the animation although this is a very abstract representation of a structure. Still you can understand what's happening. This one is elastic. A desktop, instead of the hard disk you have these drawers so you can put in the folders, like this. There's a copy machine, and a trashcan. This is an alternative mouse pointer. It's a little bigger. And it turns around. It's a little example of how you get a totally different feel to the mouse. The more physical behaviour. You can swing this thing around. And you can also change the properties, so the weight for each point. Right now I make the top more heavy. The bottom is very light. This is the strength of the rope. And now you'll see that it will behave differently - it's more swinging. Or you make it very elastic. More heavy. This is an example of how you could deal with interacting with text. I don't really like to read too much, so I made this little thingy so you can make text grey so you see only the keywords and the main sentences in the text. This is the last one let's switch to. This is a more organic demo. So here you can drag in the balls inside the circle and they start to grow. So they fight for space. And it's just a little toy in a way. And there's gravity. You can turn gravity in any direction. |
|
|
url: DOORS OF PERCEPTION |
|