Above are some small ideas I penned down in one of my sketch books. Maybe you can make them useful in some of your future interface designs. They are all about including extra information in common interface elements.

1. Range slider with distribution curve

Price ranges or other type of ranges like for example the diameter of a screen, processor speed, analogue zoom range etc are perfect examples of information that is to be manipulated by range sliders. You select the range of the attribute you are searching in the product and the search application returns the results.

But what if you select a range that is very rare and combined with other search parameters return no results. The inclusion of the distribution curve tells the user which ranges are most common and are more likely to return results.

2. Distance selection with travel time

If you want to search for a new home or for example a restaurant in your vicinity most often you can select a range in distance to narrow down the search.

Why not include some small icons that show the travel time by some icons which represent the means of transportation and a time icon that shows the travel time? Green is minutes and red is the hours spend.

3. Scroll bar showing sections

Scrolling is a handy method of navigating through pages but it is for example not easy to go to the comments right away in a blog site. Most often a separate link is included.

Why not show the different sections of the page besides the scroll bar? When you hover over the colors you see what they represent and if you click on for example the purple bar you will go directly to the comments section. This can also be handy in large articles like wikipedia pages.

4. Loading bar with subprogress

Sometimes you have a separate loading bar to show the progress of a subprocess. Why not add some colors above the load bar to visualize the subprocesses. You can also mouseover them like on the scrollbar to see what they are.

Ideas inspired by my regular dose of infosthetics. I highly recommend this blog to any kind of designer.

All mediums have their own design movements. Think art with minimalism, dadaism, surrealism, futurism etc. Think Architecture with Bauhaus, rennaissance, avant-garde, modernism, postmodernism etc. They all look with a different perspective to the design. For example from an emotional, functional, technical point of view. But could also be centered around a philosophy, vision or religion. Design needs a certain look at the object to be designed.

A design movement is not only the idea/vision behind it but also encompasses a visual design, development style and structural design. Every architectural movement can be defined in those 3 ways. So can the web design movements.

Phase 0: The web

The latest medium, the internet, is still fresh. First there was chaos upon it’s birth. People didn’t know what it was and where it would go to. They saw the power of connecting the information by links.

Phase 1: Usability – uniformity in information

Then the people began to see the chaos and wanted to bring some form and order to the web. A big influentual person from that era was Jacob Nielsen. He brought rules and suggestions on how to improve all the chaos and to make the web a more uniform place. Where you could find your information. He looked at it from an information and functional viewpoint. He brought order and a certain visual (bit boring) style.

Phase 2: Search – finding information

In the next phase it was all about finding the information. The web became large so you needed a search engine to find content on what you were searching. Search engines came like: Hotbot, Altavista, Lycos etc. But in the end simplicity won. Google became the defining search engine of this age. Search engines dictated how pages should look structural and content wise to be indexed. Certain looks helped indexing. It was the time of top menu, sidebar navigation and a big content field.

Phase 3: Rich Internet – bringing emotion to the web

Next there was an anti movement to the previous 2 movements. The internet was still a place of images and text. People wanted to experience the internet. With the advancement of Flash it was possible to create experiences in flash to bring accross feelings. It was mainly used as product placement in the experience economy. Key technology was flash but people were also creating RIAs in DHTML.

Phase 4: Web 2.0 – connecting people

This phase was about getting people to connect on the web. It was about finding like minded people while looking for content. As with design movements in other fields Web 2.0 also had a clear visual style and tech of choice although this was not present on all web 2.0 sites. The tech of this movement was AJAX for making the community finding and building more fluent. But in the end it was all about connecting people as a reaction to only connecting information.

Examples of this movement are Digg, Youtube, Flickr, Wiki, MySpace, del.icio.us etc.

Phase 5: “Web 3.0″ – new forms of presenting information

The next wave will all about information again. We lived long with text from top to bottom. The next wave will all be about presenting information in new ways that are not top to bottom. The technology will be flash again or SVG and javascript will take the next tech leap. (SVG is already working in browsers and combined with javascript capable of doing dynamic animations)

Want to see some examples of web 3.0? Check out Digg labs, infostethics and Gapminder (also look at ted video for last)

Phase 6: “Web 4.0″ – dissolving web vs desktop

This phase will all be about dissolving what is online and offline. The browser will dissappear. Apps will be on the forefront. What will be the defining technology is still uncertain. It will be about XML for information. But what will the defining background technology be for application development? HTML is not designed for applications. So what will it be? XAML of Microsoft, MXML of Adobe or XUL of Mozilla? This is still a battle to be fought. The open standard will win, and Adobe and Microsoft are already opening up their standards for others but they will be in control. I think XUL is the best option because no commercial institution is controlling it, but XUL is not yet mature… Adobe already has released a quick development platform with flex.

Google is also working on web 4.0. Creating apps on the web. If they are smart they will work onto XUL and SVG as an open development platform for their future apps providing some basic functionality libraries like flex. I don’t think they would like that Adobe and Microsoft will control this era. I think that is why Google is such a fan of Firefox. (Webkit does also already support some XUL)

A battle will be which apps will be offline and online. You need offline components to do work while you are not on the internet. Mozilla brings this with XULRunner. Adobe with Apollo. And Microsoft with WPF and unannounced tech for the promised OSX support.

A more accessible and attractive web

This last battle is still a battle between corporations so lets concentrate on web 3.0. Making information more accessible and more attractive. Enjoy the web 3.0 wave!

Related:

• Evolution of design movements
  

Ted released a real cool video today on the multitouch displays I talked about in the earlier days of this blog. For those who don’t know, TED is an event that brings together thoughtleaders, movers and shakers to share their ideas. I recommend you to check out some of their videos.

These multitouch screens are really the future I think. They remove many of the current GUI and makes manipulating data much more intuitive. If you combine it with the latest intuitive data visualisation you can begin a whole new future in information navigation and manipulation. With some of trial and error it is maybe finally possible to get rid of the keyboards and mouses.

I see a world with much less abstractions in interfaces and languages and a future were direct manipulation gets closer and closer. I see new ways of getting insights into patterns in data and processes. I see new ways of learning, creativity and inspiration. I hope these tools become common soon.

I will just continue to play with my DS untill the time is here.

I discovered I am obsessed with new technology. Not all kinds of new tech but tech focussed on human interaction. Tech that can give you insights and true experiences. I scout my RSS feeds daily for new innovations and try to imagine what will become of that. Some obvious examples I share but others will go into my bookmarks for later reference.

On the road of my study I also encountered an area that is still a real barren land and needs new visions and tech. All by working on a simulation project that came on my road by accident. I was introduced into the world of Serious Games and I liked the way interaction and 3D environments came together to form learning experiences.

My graduation project will focus on an interaction design on how to maximize this learning experience both on the input and output side. My goal is to get an immersive and ‘fun’ experience that complies with the goals of the learning instrument. What is needed and to be avoided.

I am still in the first orientation phase and try to get my question as clear as possible and try to find people that can answer some of my questions. Well this is of course not a study that is done by the end of the grad project but I hope to get my ideas into a clear vision that I can share.

Car trouble at Akkrum

Histerical Machines

Drinking Robots (Bar Bot)

Robots you can control (You move me)

Robot DJs (Robolab)

Robo Tramp (Dirk)

Run Motherfucker Run

Nervous furry creatures that sense you are near. (Nervous)

Nazarenos

The rotating box with an attitude (Spatial Sounds)

Lasers which produce music when broken (http://www.beyondexpression.nl/)

And lots of DJs and VJs (Pictured: Addictive TV)

More info at STRP.nl

Yesterday I went to a new festival in Eindhoven called STRP. After a troublesome trip and car malfunctions we finally arrived. (the trip took 5 hours)

The festival took place in the Strijp building where Philips did some of the biggest technological discoveries like the audio cassette, video 2000 system (which was superior to the VHS of course) and the CD. (which we still use today and still upgraded to DVD and bluray) The building had a very industrial feel, you felt it was abandoned and it had a grotesque feeling inside. The big halls where filled with all kinds of cool technology, music and cool creative people.

Interaction was very important with all the displayed examples. Some needed direct interaction like furry creatures on the wall that began to shake and make noise when you came close, some went their own way but looked at you and you begin to notice after 3 looks the tramp is a robot. Also great was RunMotherfuckerRun, you run through empty cities and can choose your route by running to a side of the belt on selection moments. The belt had a very hypnotic effect and encouraged you to run hard. I did not notice how hard I runned until I stopped after a while.

Also great was the spatial sounds system. A box that rotated around and reacted on people standing close by, if you irritated it, it began to rotate very fast (100 mph) and create a very hard sound. It really absorbed me with its behaviour.

The evening and night were filled with music and VJ performances. There were some great shows and I really lost myself dancing.

Like all this kind of stuff: it can’t be explained, you have to experience it yourself. Next time I will be there again but hope to see more days of the festival.

Oh and thanks to Vince for driving us to STRP and back in the late hours!!! And thanks to Marlies for being our mother on the trip and taking care we were being fed!

PS: Soon I will post some photos of some of my experiences on the festival (taken by Nadia, I hope I will get them soon )

http://www.origamiproject.com/

But it seems they could not keep the secret until launch. A demo movie has already been spotted on a site of a marketing firm.

http://www.d-kitchen.com/ (enter site> work> brand theatre> Microsoft Origami)

Looks like a cool device that seems to bring the tablet PC to the next level. It is an iPod, PSP, communication system, internet browser, navigation system, portable HD in one it seems. Well the next portable assistent war has begun. (seeing the rumors on the Apple tablet mac/iPod)

Just watch the video here:
http://mrl.nyu.edu/~jhan/ftirtouch/

It looks like its inspired on the tactapad. Which was only missing the direct screen connection.

Asking yourself when you can use those screes yourself? Here are some recent Apple patents:

• Interaction: http://hrmpf.com/wordpress/48/new-apple-patents
• Screen sensor: http://hrmpf.com/wordpress/38/apple-integrated-sensing-display
  (which could also make possible a scanner that directly scans a picture by holding it on the screen)
• Other sensing technology: http://hrmpf.com/wordpress/51/apple-multipoint-touchscreen
• Onscreen keyboard: http://guides.macrumors.com/Gallery_of_Touch_Screen_Interface_Patent

I love to see where the future goes with these new technologies. But all we thought was standard on computers may be a thing of the past very soon.