Flash Forward

These guys showed off their API at flash forward day 2:

http://labs.ideo.com/

iPhone GUI PSD

http://www.teehanlax.com/blog/?p=447

Endless designy fun.

Emotion and Flow

We create software and websites to display and represent information to people. That information could be anything; a company’s product list, pictures of your vacation, or an instant message from a friend. At this moment, there’s more information available to you than at any other time in history.

All this information has a lot of positive effects, but it also creates challenges. “What information consumes is rather obvious; it consumes the attention of its recipients … a wealth of information creates a poverty of attention” (Simon 1971). When attention becomes a scarce resource, it’s important to invest it wisely. Information architects and designers play a critical role in ensuring the products they design provide users’ with a return on their investment of attention.

Read more about emotion and flow.

Flash Forward

Friend of mine will be blogging from Flash Foward. If curious about the conference please check out his blog.

Beauty

http://www.smashingmagazine.com/2008/08/17/10-futuristic-user-interfaces/

5 Useful Coding Solutions For Designers and Developers

There's a great article on Smashing Magazine that can really inspire you when it comes to designing a multi-touch interface.

Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.

The article goes on to talk about five really clever interfaces, maybe they can inspire you.

Sound Off!

#1 Newbie mistake: Sound

Sound needs to be subtle, non-pervasive and elegant. If you blast rock or annoying voices upon every click, your user is going to get turned off in a big way. Unless you've made a rock-band game, keep the hard rock out.

Listen to your own music, again...and again...and again. If you can't stand it then people not in love with it REALLY won't love it. If after 2 hours of music you can still stand a sound, go for it.

No chimes, jingles or invasive sounds either! Keep it simple and subtle.

Think About the Timing!

Time and people's perceptions of it is a growing field in digital design. When you think ahead are you thinking of how people will perceive the pace and timing of your project? Sure for menu-driven content it's fairly straight forward but what about when your giant-file multi-touch apps start going live on the web? TIMING.

Here's some advice

1. Load behind the scenes - Whenever possible pre-load work behind the scenes. Actionscript is great for this. Don't just load assets on the fly, make them appear quicker with preloading.
   
   
2. Divert attention - People aren't idiots but they aren't all savants either. If you give someone something quirky or fun to look at while loading then you'll improve the general feel of your app. A small animation of loading is better than none at all.
   
   
3. Preemptive start - An old-hat trick for NES developers was a "Start" menu. The start menu allowed all sorts of pre-caching to happen behind the scenes. It slows the user down while preventing them from feeling like the app is stalling.
   
   
4. Load indicator - Whenever possible tell people how far along their load is. This is a real life-saver when it comes to programs that take over 10 seconds to load. Don't bother for apps under 10 seconds though.
   
   
5. Don't interrupt! Do the bulk of loading up-front. People are MUCH more forgiving if you load before hand than in the middle of their session!
   

Actionscripted!

ActionScript 3.0 is a programming language from Adobe that people have been using in conjunction with Touchlib to make multi-touch programs.

I've recently embarked in basic research to learn it to begin development.  My first step before I even get into the touch stuff is to learn the basics.  However I've been doing heavy research into the subject and happen to work with people who do very advanced Actionscripting for big-name clients.  I asked them what resources they would recommend for someone trying to break in.  I thought I'd share.

Step 1: Actionscript 3.0 for Adobe Flash CS3 Professional

This book covers the essentials of Actionscripting.  This is where you want to start.  Todd Perkins does a good job of presenting real functional code in an easy-to-read format. 

This book te

aches the foundations of Actionscript including events, functions, packages and classes.

The CD included with the book contains source files to ease the learning process as well as videos explaining key concepts.  $50 on Amazon.

Step 2: Foundations of Actionscript Animation

Foundations is a great book to learn the mathematics behind Actionscript animation.  It contains many code examples of how math can be used to animate in AS3.  Foundations covers everything from simple Sprite classes to advanced interactive techniques.

It should be noted however that this book was written during what seems to be an early period of AS3.  Many of the examples are flawed and should not be taken at face value.  Read it to learn about the math than how to actually program in AS3.  The website features code from the book that...isn't even in the book...with no explanation.  Retail $40.

How to Cheat in Flash CS3

How to Cheat is an excellent guide to animation in Flash.  This is less Actionscript-oriented and more geared towards actual animation.

Chris delves into several techniques for creating your own animated character but also stretches into some handy techniques for any developer such as setting up your preferences for maximum efficiency.

Check out Chris' blog if you get a chance.

If you have ever stared at a blank stage wondering how to make your ideas into reality, this is how its done. I consider each example a best practice of how to use Flash CS Professional.
Justin Everett-Church, Sr. Product Manager Flash Player, Adobe Systems

Numb Face

Face numb from lying on keyboard attempting to learn actionscripting....

/zombie

Mark van Wijnen Interview: Part 2

What were some hurdles in the project and how did you overcome them?
Building the multi-touch hardware was the biggest hurdle, the only thing I built before was an IKEA closet. This also shows that everyone can build their own multi-touch table if they want to, as long as they don't quit easily.

I overcame it by reading the How To tutorials, by reading forums, and just by trying it out, buy the equipment and just do it. I also had some problems using the communication tool the NUIGroup uses, so I overcame that by building my own. Other then that the only problem was time - unless you invent a time machine, you can't overcome that.

If you could impart some words of wisdom to people just getting into multi-touch development, what would you share?
Just do it! If you are passioned about it and you like building your very own computer table, you should just do it. There are a lot of games and applications for it already, you will enjoy it.

What do you think of the multi-touch community? How could it improve?
Thanks to the NUIGroup it's great, your topics don't get censored, everyone is very helpful and try to contribute to the community, so it's great.

As a developer, where do you see multi-touch in 5 years? 10?
Well multi-touch would just be as normal as single-touch screens. Apple already uses the technology in it's phones (iPhone) and ipods (iPod Touch) and Microsoft will soon follow with their new operating system [Windows 7] and it's Surface, more companies like Dell will follow. In five years, everyone will be able to affort and use multi-touch. The technology used today will still be very interesting as it allows for creative use, like integrating it in shopping windows, etc.

What do you do when Catan is finished?
A product is never finished, there are always things to improve and make it more fun. There are still so many options I like to integrate in this game and a lot of things that need another approach to make it better. So if I had the chance and the time I would definitely work on that.

Unfortunately I don't have that luxury. So now that the beta is finished, I need to finish my thesis and after that I will take a long vacation to a tropical place. When I get back I am curious about developing for the iPhone 3G, due the fact that it has a lot of technology in it which you can use, GPS, WiFi, (Multi)Touch, Accelerator, Camera, etc.

Mark van Wijnen Interview: Part 1

Who are you? What do you do? What are your capabilities? What is your motivation to pursue multi-touch?
My name is Mark van Wijnen, 23 years old, and I live in Holland. I am currently doing my masters in arts and technology at the HKU in Utrecht where I am being trained to become a game designer - I'm a designer and a programmer.

My motivation for pursuing the multi-touch technology is mainly my graduation project, where I wanted to prove that you can bring board games to a computer with the same amount of social interaction and fun, or even more fun. I believe computers can really enhance board games.

What's the hardest part of multi-touch, what parts do you think need the most improvement in terms of tools for developers?
Regarding to games, the hardest part of multi-touch is hiding information. When it comes to parts that need most improvement, that's really hard to say.

Off the top of my head I would say that it would be great if Touchlib could recognize one finger from another finger and if two fingers come close to each other that would still be recognized as two fingers. As for the communication library between Touchlib and Flash I would make it more accesable and much more userfriendly. Other then that it's pretty solid.

Tell us a little bit about your Settlers game. What types of multi-touch functionality does it have?
Currently the Settlers game is just a copy of the original traditional board game: The Settlers of Catan by Klaus Teuber. I don't allow myself to copy the dice, cards, pawns etc. - I used different methods to work around them. Every player operates his or her control panel by just a single touch. Because they can all use it simultaneously it becomes multi-touch.

How did you program it? What were your objectives?
I coded the game in Actionscript 3 which comes with Adobe Flash CS3 and used my own Touch!Library for the communication between OSC and FLOSC, which is also coded in AS3. My objects were to design a simple tool so anyone could create multi-touch applications fast. My main objective was to see what the board game experience would look like on a multi-touch device and how a computer could digitally enhance it.

How did you design it? Can you take us through the process?
You always start with an idea. I wanted to experience board games on a multi-touch and therefor I could have chosen any traditional board game. The reason I choose The Settlers of Catan was because I wanted to avoid using any external objects. Catan seemed to have a lot of typical board game objects like dice, cards, pawns, etc. this would mean I would need to find other solutions for them. So I started with creating a framework for the game that holds every action you can do in the game in functions.

For example the functions giveResourceToPlayer() or takeResourceFromPlayer(). A framework is very handy because there are so many ways how players could interact with your game, if you would change one thing because it didn't seem to work, you don't have to change the whole code. After the framework was done, I concentrated on the design and interaction. I'm not an artist and so I was very limited to the graphical part. It's very important to have an overview of your game in mind, how players will overal interact with your game. I came up with the individual control panels, where everyone has their own panel to see their resources and to perform their actions.

After that had been decided I needed to build all the features you can do in the game. It's VERY important to TEST!! When a version is stable enough you should definitely test it out with family, friends or other people who are willing to help out, this way you get new feedback and you are able to quickly see what works, what doesn't work, and more importantly you can see if your design is logical enough.

Can the player navigate and operate the control panel without you telling them where to touch? Bugs you may come across, any feedback you may get, you put that in the game and test again. If the game designer and the testing group are happy you can release it.

To learn more about Mark or his Settlers project please visit the Crystal Minds blog.

Catan

Check out Crystal Minds blog.  The creator, Mark, is making a multi-touch settlers of catan game.

For a while now I’ve been working on a multi-touch edition of the board game The Settlers of Catan which is originaly designed by Klaus Teuber. I am almost done with the first beta version and since my current FTIR setup isn’t as stable as I would like, I need beta testers to help me test it out. Are there any volunteers?

Check back Saturday and Sunday for the two-part interview with Mark about the project!

Touch Illusions

Video of multi-touch stage illusion for reference.

I was looking at that video and how it could apply to magic shows or theatrical plays.  What limits such creativity?  Imagine if he was moving along a cast of cartoon critters instead of pictures.  Imagine if stage wizards could create vivid illusions on-stage.

Considering the insurance costs of pyrotechnics these days this may just be a growing marketing that's yet to be tapped.

Sci-Fi Interfaces

While I'm on the topic today:
http://www.youtube.com/user/ambutz

An interesting watch.

Why Star Trek Design Sucks

Time to roll up our sleeves and get nerdy. I'm not a Trekkie (though I watched quite a bit of the Next Generation) but I do have a fetish for strange interfaces. One of the first things that came to mind when I learned about touch screens becoming more commonplace was Star Trek. I'm marking this post as special because I forsee that as soon as joe-user begins creating interfaces we're going to see something somewhere that looks like this:



And on that day I will do two things.

• I will cry.
• I will link this post.

The Star Trek interface is not only bad, it also visually atrocious. For all that is good and holy there is a standardization board . Go to that site, please. On there? Good. Now without reading the words tell me what is and is not a link. Chances are you're very wrong.  Now I think it's an awesome amount of dedication to a project and for what it is they've done a great job programming but the nature of the interface itself is terrible.

This was going to be a short post but to hell with it, let's dive in. I figure this can help to teach you what not to do.

I DON'T NEED TO SEE MY COMPUTER PROCESSING INFORMATION
Is their a design purpose behind showing a computer's data? Are people from the future super-duper hex-code readers? No? Yank it.

I DON'T NEED SIX SHADES OF EVERYTHING
There are at least 10 individual colors on that page. The color (besides RED ALERT) does not seem to have any particular designation. Honestly I haven't bothered going through the standards doc but if I have to learn what 20 shades of color mean then there's something SERIOUSLY wrong with the design.

DO NOT CLUTTER THE PAGE
There is no "white space." We were raised in school to think that space was evil. It meant you did not fully answer questions or did not use everything inch of what you could have. But in the design world white space can be great in helping people figure out where they should be going. This site does not provide that opportunity.

SAME FONT
Everything is the same font and ALL CAPS. It's incredibly hard to differentiate one word from another because all the heights are even and the human eye does not read like that.

BAD SHAPES
The shapes do not denote what is interactive and what is not. They're just there to be futuristic. Design must be both functional and beautiful - this is neither.

Getting Started: Brief and Research

Before you start any project you should always write out a brief and do your research. A brief is just a series of short answers that speak to what the project is going to be about. You can use the questions below as a baseline.

What am I doing?
Creating a plus sign button that, when clicked turns into a minus sign. Clicking again will bring it back.

Why am I doing it?
Eventually I want to create a series of easy-access menus and need a simple to understand icon to expand or contract these menus.

What is the end product?
A rounded button in flash which switches between + and - upon click. Asset is a .fla files and a .swf.

What factors do i need to consider?
How do I want to transition the animation. Is it a quick switch or something else. Vector or Raster art.

What is the artistic style/mood of the piece?
Generic - can fit many styles.

Who can it benefit?
Myself. People making menus.

Next you do the research. Research is primarily to prime the pump of your subconscious. The subconscious can be thought of as your conscious mind on steroids. You can't control it but it "leaks" information to you. Doing research and then leaving something alone for a while can be a great boon - I always leave myself several days between an idea and executing it - this allows my mind to do its work. Rarely fails.

Woah

So pretty.

A Little Creative Inspiration with Your Morning Coffee

http://www.gapingvoid.com/Moveable_Type/archives/000876.html

Animation Man

Developers are not designers and designers are not developers. I've learned this over the years. There are few people talented in both the development (left brain mathematical) and the design (right brain creative) parts of a project. I've recently been talking to a few of the touchlib people about their progress and why they feel they've been going slow.

1. They're new to programming and while there are resources there is no comprehensive guide.


2. They feel that while the nui forums provide support there's no collaborative effort to help with the little things.


3. They can program but they have no idea what goes into practical design and get frustrated.

Now any of these problems is solvable. 1) A writer actually building a step-by-step guide. 2) A richer community experience perhaps utilizing social networking or ventrillo. 3) Designers. Not to knock nui (I love it) but there are 7 or 8 development forums but none for design!

Designers are important to the community because we know how the mechanisms of animation work. For example if you wanted to drop an icon to the floor though a fake gravity design most developers do this:

It drops down just fine, in a straight line.


But what they don't realize is that to be more fun and interactive you should actually make it:


Bounce!

I suggest before beginning development on anything new you work out a design document and prototypes. But more on that next week!

Iconography

Icons! Icons! Amazing little things. Icons are a HUGE part of interface design. Most companies create icons by boiling down their biz into a slick-looking image.

If you truly intend to go all the way with UI design it will greatly help to know how to make these little buggers. Don't waste your time on research! I've done it for you!

• 10 Mistakes of Icon Design
• 7 Principles of Effective Icon Design
• Handy Web 2.0 icons in Photoshop
• Icon Design Explained (Quickly)
• 55 Free high Quality Icon Sets
• 40+ Extremely Beautiful Icon Sets
• The Visual Design of Web 2.0 (It's infecting software too!)

If I can find the video online the next story should be about how you can bring these little buggers to life!

Elements of Influence: Storytelling

Tablet Designers

Occurance:

1. There are a lot of people clamoring for their own tablet.
2. There are people who know how to build them.
3. The elements of these tablets can be customized to some extent to make them look cool.

By the laws of supply and demand someone could make a hefty profit by building custom rigs with artistic designs and such.

Elements of Influence: The Call-to-Action

Here's some brain food:

When advertising first rolled out it was extremely effective. "What is this?" The people would say, looking at an ad for shaving cream, "I do need a shave." Eventually people got used to the ads and learned to ignore them. All the advertisers in the world collectively scratched their heads and said, "By jove! This isn't working as well any more!" So they busted their noggins, looking at what worked and what didn't until they noticed a trend - ads that ended with some action the viewer could take had better results.

"DOWNLOAD NOW"
"See your doctor to learn more about adnaseumXD"
"See your grocer's freezer"
etc, etc, etc...

From this they created the term Call-to-Action or CTA. That's why most banner ads you see have a button you can click or an action you can take at the end. It's just more effective.

"How does this relate to my multi-touch design?" you say. Well the simple fact is that if you assume the user will do something but you give them nothing to do then you have failed. I have seen again and again programs that tell you to do something but give you no explanation as to HOW.

“But my users are smart!” You declare, finger again waggling in the air. No, no they really aren’t. If your design isn’t god-like-intuitive then people just aren’t going to get it. People want to know how to do things and once they know don’t want to be explained to every time, they’re very very unreasonable that way.

Think of working in a company that builds tablets. The first few tablets you build you’d want instructions. After that you’d want a reference, then you’d just ignore the whole thing and build’m yourself.

Imagine a library without a reference system.

When programming something in touch that isn’t obviously obvious it’s best to give users the option to learn. If you don't tell users the where and how of what they're looking for then your design fails.