If you’re interested in that, you can follow the process on our project tumblr.

Hopefully you can forgive us this long time without posts. We’re looking forward to see you, when we have time again to post interesting articles about everything related to interaction design.

Big thanks from Antonio, Patric and Marcel.

As you may read the last blogpost about the vision of microsft and their design, in this blogpost I want to show you something about the interactiondesign in the vision.

Some hours ago the magic happened and a article about this topic appeared. Its author is Bret Victor. He designed the initial user interface concepts for iPad, iPod Nano, and half a dozen experimental hardware platforms. He also Invented features for Mac OS X Lion and worked with designers and engineers from all parts of Apple.

His article is not mainly about the microsoft future vision, but about interactiondesign in general. One important point he states is about the missing tactile feedback on devices today and how we interact with our hands naturally.

Here are the steps to continue:

1. Read the article
2. Understand it
3. Read it again!
4. Observe your environment!
5. Understand your environment
6. Design good interactions

After Microsoft released some videos in 2008 and 2009 about their future vision of the year 2019, some time lapsed. Now after some more years of trendresearch and experience the office labs released a new vision of productivity in the future.

David Jones, Microsoft’s director of envisioning, whose group developed the video shows that intelligent system will take place everywhere we need information in the future. The network of devices will share data and information in a fast way, so we are able stay focused on our task we are trying to do.

The visionary User-Interfaces and the interactions nudged myself to give a closer look to them. So I just collected some of them for examination purpose.

Maybe you noticed, that Microsoft already used some parts of the visions user-interface. Yes indeed! I am talking about the metro UI which you can find on the Windows 7 Phone and the beta-version of Windows 8. So I think Microsoft is on a good way when they’ll keep the plain simple Metro-style.

Another important source are games. As I played cryteks crysis 2 a few days ago, I thought it might be a nice inspiration for other people too. So I decided to give you a sneak preview of the interfaces within the game.

I am not the only one collecting these neat stuff. There is also a blog I am following, which provides a fundamental collection of interfaces of movies & games. So you don’t have to watch all the sci-fi movies, because someone else did it already for you. The blog is called Huds & Guis and worth to follow! It started about one year ago, so the collection isn’t that large as you may expect.

That’s it from me. What do you think? Can you recommend a special movie, source or hint for designing futuristic interfaces?

First of all: I really love my mac and I love OSX! I really used my former Mac with Snow Leopard installed on it like no other computer or device, because there was a really great simplicity and neat UI Design.

BUT

What the heck did they do with Lion? The first time I looked at it I thought, that it might be quite nice. The first time I used it, I thought, that it’s cool, but not that great step to the future. Now I used it for more than a month and i think: „what the heck?“

Okay. very long intro – here some few various facts:

1. Finder Icons

Okay. I understand the following principles: „Make it more simple.“ / „Focus on the content.“ That is shit. In this case it is very important for the user, that you have some kind of a recognition value. I want to use the Finder-Interface as fast and efficient as possible. For an efficient sidebar on the one hand responsible is the continuous order of the icons+text. On the other hand it is/was the color combined with the form of the icon. Now its gone. But yeah, it’s more simpler. Here it is: simple != efficient.

2.  (small thing) Window Buttons

And again. Efficiency. For example: Under OSX the menubar, where you can access nearly all features of a application is on the top of the screen. This makes it efficient. You don’t have to point there, you just take your mouse cursor and throw him to the top of the screen. It hits the menubar.

The new „window-control-buttons“ are harder to hit than before. They are smaller. But why? They are very important for users who don’t use their entire OS with the keyboard. But yeah, sure – it looks better. It is an operating system, not a portfolio for an photographer.

3. New „Spaces“

First of all, there are full screen apps now. Every full screen app has like its own space. So there is my surf space (or called desktop now), my graphic apps space and my coding space. Plus all those fullscreen apps. How do I navigate to another space? With Snow Leopard I had my shortcuts like alt+1, alt+2, alt+3 – Now, depending on how much fullscreen apps you have running, you have something like up to 5, 6 or even more spaces. I don’t want to press alt+6, its like breaking my fingers – and I can’t even find the settings how to set up the shortcuts within Lion.

But Apple has the solution right from the scratch. Making the spaces sorting automatically. I really don’t want that. Okay. How about making a very simple and obvious solution? Sort your spaces manually within Mission Control. Not possible!

4. (smaller thing) Start where you left

Lions new „feature“ for Apps to start them like you quit them is quite a mess. I’ll just make one, simple example here:

Im opening 100 pictures from a CD with the Preview.app. I’m done looking at them, I close Preview.app with CMD+Q. There is another folder with another 100 pictures on the CD and I’m opening them with the Preview.app. What happens? Preview.app opens – The first thing I’m seeing is the 100 pictures of the folder I looked at 5 minutes ago. What the …? I want to see the pictures I just opened.

5. Dock Unread Count Indicator

See the unread count on Sparrow? Now? Me neither. Really Apple, what happened right here? Not all people on the world leave the Dock settings on their Mac untouched. But yeah, bring something „good“ of the iPad „back to the mac“.

For now. That’s it. Don’t take it too serious. All in all it is my personal opinion mixed up with some knowledge I acquired the last few years. But it’s some kind of frustrating, that Apple isn’t really loving the Details any more on the desktop operating system. They’re trying to make it all more like a big metaphor, with fancy textures on the iCal bar or an Address Book with fancy, glossy buttons and textures and inverse scrolling. But they ain’t love the details any more.

Alfred is a productivity application for Mac OS X, which aims to save you time in searching your local computer and the web. Whether it’s maps, Amazon, eBay, Wikipedia, you can feed your web addiction quicker than ever before.

This post is a short insight on how to write an Extension for Alfred.

A few days ago i had the idea for a simple extension. Putting your Mac to sleep with one simple command, instead of scheduling it via the System Preferences Energy Settings. Simply typing „s 20“ into Alfred to put my Mac to sleep within 20 minutes and if iTunes is running, slowly fade it out.

What tool?

Therefor first of all I had to choose wheter to do it with Applescript or with a shell script.

This decision fell very fast. I had no clue how to make iTunes fade out with a shell script – and I did not find anything on google. So Applescript was my choice.

What do you need?

Google – of course you need google. If your looking for help, Google is always the first place to ask.
Via Google I got very fast into the Basics of Applescript. It’s a very simple language. You write, what you want to do. It’s more like a dialog, not like a programming language.

Applescript. The standard Applescript-Editor is within the Utilities folder located in you Applications folder. Open it, look at it, play around with it.

Coding

Applescript is very simple, as already mentioned. With Applescript you talk to your computer – more or less. For example: I want to delay the script for »sleepDistance« (an integer) minus »fadeTime« (an integer) if the Boolean »delayIt« is true. The code looks like this.

if delayIt is true then delay sleepDistance - fadeTime

Very simple and good to understand, isn’t it? Another example. I want to set the Boolean »delayIt« to false.

set delayIt to false

And again. Very simple and straight – just „say“ what you want. And controlling iTunes is also very simple. If you want to change the iTunes volume to 50%, simply tell iTunes to do so:

tell application iTunes
set sound volume to 50
end tell

And what’s really nice about it is, that you can also run shell scripts within Applescript.

do shell script "pmset sleepnow"


This snippet puts your mac to sleep instantly.

Help

Some places where you can get help, if you plan on playing around with it.
Macuser community
The Applescript Guide – definitely
Directly at Apple

Conclusion

Applescript is a nice little language. You can get things done very fast with it, but it’s also limited. You simply can’t do anything with it. However for me it worked out, i’ve got my nice little script for Alfred, which puts my mac to sleep after »n« minutes.

Download

You can download the Extension right here. Also you can download the source of the Applescript right here.

“Have you ever wondered what a touchless interface needs for visual feedback?”
This is a short introduction to the issues of touchless interfaces and our first approach on how to design for it.

What?

So, first question, what is actually a touchless interface?
A tochless interface is an interface that you control without touching anything.

Common examples are motion sensors that activate lights or open doors, but these interfaces are relatively simple and do not need additional feedback. It gets more interestings with more complex systems like voice control or gestural interfaces like the microsoft kinect. By the way, back then in 1919, a touchless interface was invented, the theremin.

So lets focus on intefaces that are more complex and need visual feedback.

Why?

Who or why do we need actually touchless interfaces?

There are several usecases where a reliable touchless interface would make perfect sense.

• For example in the public space at cash machines, where everyone touch the exact same areas on the keypad or display. Isn’t that gross?
• Or at some workspaces where the hands are extremly dirty and are protected with clumsy gloves.
• At the kitchen, a case study by the Fraunhofer Institut

This are just some examples, and sure there are a lot more usecases. Why aren’t there more touchless interfaces, beside experimental game controllers…?

The Concept

In our study we didn’t focus on creating perfect usecases, but on two basic questions:

• How must a reliabale touchless interface work?
• How must the visual feedback look like?

Because these interfaces are barely explored, we did not want to focus on just one element. We wanted to envolve an enviroment where you can experiment with the touchless interface and explore just the right visual feedback by adjusting every parameter.

The touchless interface

We have one distance sensor and want to press just one single button at the center of the screen. To activate the button you should be at a certain distance in front of the button, called the target position.

So, how does this work?

We explored four main states and two transitions between the states.

• State 1: the inactive state, nothing is in the range.
• State 2: The hand is at the target position in front of the display.
• Transition1: Between State1 and State2. It Shows the progress while the hand is approaching.
• State 3: You need a delay, when you reach the target position, that protects against unintentional activation.
• Transition 2: Shows the progress during the delay.
• State 4: The button is pressed! This comes immediatley after the delay.

This means that the button needs four states.
Three states are nearly similar to a normal button. Inactive, hover and pressed.
The difference is that you press the button after hovering over it for a certain time, also you want to give a feedback, how far you are away from the target position and how long the delay lasts.

The App

With this definition in mind, we developed an application where you can define every
single state and transition. First we focused on the basic parameters like size, colour, stroke-width and shape.

Also we thought that is would be important that you can define the easing of the transition.
Should the curve be linear, exponential, ease-in/out or even have a costum curve?
People who are familiar with animation know what we are talking about.

After we created our first prototyp we discovered one key issue.
The aim of the visual feedback is to give you an idea where you are.

Do you have to move a bit further and how long do you have to wait until the delay is over?
So you need something like a progress bar.
Changing colour for example is a very bad progress bar, you just don’t know when it finishs. Changing size or a changing shape from oval to a rect with round corners doesn’t work, too. A transformation from a perfect circle to a rect works a bit better, because you know circa when it finishs.

Great progress.

So this would work somehow…but what do you need that it works great?

We defined two different types of progress bars you can add to the states.

• The first one is a stroke that grows around the shape until it reaches its origin.
• the second one is a shape that grows from the center to the boundaries.

This means for example, when you are half way in front of the target position, there is a stroke half around the button.

When you add one of these elements, suddenly the whole interaction becomes much clearer.
Sure you can use different progress indicators. Just make sure that it is clear where it starts and where it ends.

And what is with the settings for the transition?
Well, a linear transformation is clearer than an exponential transition, but this needs more study, we can’t tell you now what works best. Maybe, when you get in the area of the distance sensor you need a lot of change and near the target position a linear transformation will work better.

Within the Button Lab you can additionally set the area of the distance sensor by moving
the start and end point of the first curve. The endpoint of the second curve sets the delay time.

We hope, that we could give you a short introduction to the issues of  touchless interfaces and what you need for a visual feedback.
We are eager to see what you will discover, because this is just the tip of the iceberg…

The Rimino concept is an E-paper mobile device with a user interface inspired by print posters. Historically, as technology has progressed, devices have become more conspicuous. Rimino challenges this trend and presents the alternative: technology that is more integrated and more sensitive to the human experience.

That’s what Amid Moradganjeh wrote about his master thesis “Rimino” at the Umea University, Sweden.  

Amid Moradganjeh did some interesting research for this concept, what was strong inspired by observation.
For research purposes he destroyed its phones display to try if he is able to use it. He tried to get into his phone-book but in the end was not able to make the right call. He heard that he received massages but was not able to check them. After a while of using the damaged phone he said:

… I was trying to find alternative ways of getting in contact with my friends and make sure I am not missing out on anything. … The more I spend time using my destroyed phone the more I could appreciate the non-visual basic interaction with the phone. … That was also a point where I realized that we don’t need to actually have a phone that size and with that shape. I also came to realization that when you take the proper communication away from a mobile device, you can think of it as a device that could be used for other things rather that connection with other people.

On his page you can read the whole story of inspiration he got. With these basic experience he developed a concept with natural interactions through the use of real life metaphors. You should really take a look on his page, its very inspiring!

This is how it works:

As a ladenetz.de customer, you will receive a personal charging card. With this you can fill up your vehicle with electricity at any charging station. Register yourself with your charging card at the stand of your choice and a charging point will immediately be activated for you. Connect the vehicle to the station with the charging cable and there you go. Your vehicle is charging and you are free.

When you want to finish charging, just pull out the plug. The charging is then finished and the number of kilowatt hours you used is registered. Regardless of where you charged, the charging station recognizes that you are a ladenetz.de customer. Your contact is still your local public utility company.

Unfortunately I have no electric vehicle to try it by myself. But I took a look at the interface of the charging station. It seems to be really easy to use, there is just the display of how much kilowatt / hour you needed next to a card-scanner, another display placed over the charging plugs telling me that it’s out of service and the corresponding charging plugs for car or scooter symbolized by two clear icons.
Maybe the displays of the kW/h-consumption are placed too low because you have to bend down to see something. I asked myself if it’s necessary to use two different displays to show this information the kW/h could also be shown in the display next to the charging plugs.
During the next weeks I will observe the charging station and hopefully find someone charging his vehicle.
Go green! ;)