Sampo Karjalainen

Moves for iPhone

Thu, 24 Jan 2013 19:08:00 +0200

It’s time to break the long silence in my blog. The reason for no posts is that I’ve been busy building something new. And today it’s being launched.

The new thing is Moves. It’s an activity-tracking app for iPhone. It’s a bit like Nike+ Fuelband or Fitbit, but in your phone: no need to charge and carry another gadget. It’s also an automatic diary of your life. It shows where and how you move and the places you visit.

The project has kept me busy for the past year. We founded the company in January 2012 and now there are of eight of us working on it. It’s a fascinating project with interesting technology and design challenges, and if we’re successful, it will have a positive effect on people’s well-being.

Moves is a free app and it’s now available from the App Store. Learn more about it at moves-app.com.

Update: TechCrunch, The Next Web, AllThingsD, Pandodaily and The Verge write about Moves.

Game Show

Wed, 30 Nov 2011 11:09:43 +0200

Imagine a TV show like Project Runway (Muodin huipulle in Finland), but with game development. In each episode the contestants, let’s say programmer–designer pairs, design and develop a simple mobile or web game, in a limited time, based on a given brief. After each episode the created games would be played immediately by the audience. The audience would decide which games get the most plays and best ratings.

It could be good entertainment, and even better education. It would be most interesting to focus on game design: the mysterious art and craft of creating and tuning game ideas and mechanics. It’d be fun to show the different approaches and talk about some best practices, for example along the lines of Jesse Schell’s great book The Art of Game Design with clarifying infographics. The production could be executed in the context of a game design education programme. The more reputable the coaches and judges, the better.

I came up with the idea together with Mikko Köykkä earlier this year, and we’ve been talking to some TV production companies and games business people here in Finland. However, right now we are quite busy with other projects. So we decided to blog about this to see if someone else could do it, because we’d like to watch the show. :) Take the idea and run! Or let’s discuss it in comments or face-to-face.

Would you watch this show?

Framing Games as Tools

Wed, 02 Nov 2011 15:20:00 +0200

I gave a short talk at Slush 2011 startup conference. It’s about one way of looking at games and their value to people.

Here are the slides, with subtitles. (Full screen view recommended)

10 Favourite IxD Books

Sat, 27 Aug 2011 19:01:41 +0300

Interaction design (or user experience design) is a craft. I learnt it by doing, without proper mentors: creating multimedia presentations, CD-ROMs, websites and games by observing other products, using common sense and trusting my gut. Back in those days, interaction design wasn’t really a specific job; it was something a concept designer or graphic designer did as a part of their job. As a result, the products sometimes lacked understanding of user motivations, or performed poorly in usability tests (if there were any).

While working on Habbo, I decided to check if anything useful was written about this topic. Over the years I have found some books really useful. I wish I had read them earlier.

Here’s my top 10 IxD books:

Designing for the Digital Age

How to Create Human-Centered Products and Services
by Kim Goodwin

The number one. It contains a comprehensive explanation of Cooper’s goal-directed design process with material on design principles, research, personas and scenarios. With 768 pages it’s not an easy read, but for me it built the big picture of how to think about the design process.

About Face 3

The Essentials of Interaction Design
by Alan Cooper, Robert Reimann and David Cronin

This book comes from the same school of thought as the previous, but focuses more on design principles. Solid stuff, but it gets a bit random towards the end. There are some fun things, like Mac OS X Lion’s auto-save feature described some 10+ years earlier.

The Inmates Are Running the Asylum

Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, by Alan Cooper

The third book of “Cooper-school” to complete the trio. This book is aimed at business and technical people. It paints a picture of why it’s valuable for products and services to be designed for people. The book was originally published in 1998, and luckily the situation has improved a bit since then.

Don’t Make Me Think

A Common Sense Approach to Web Usability
by Steve Krug

A really easy and entertaining to read from Steve Krug. It’s a great book for anyone who has something to do with developing a website. The best effort vs benefit ratio!

Rocket Surgery Made Easy

The Do-It-Yourself Guide to Finding and Fixing Usability Problems
by Steve Krug

Another Steve Krug book, this time explaining a simple process for running usability tests yourself. Usability tests are seen as slow and difficult, but here’s a model that makes them quite easy. Being involved in testing yourself helps you make better decisions next time.

Paper Prototyping

The Fast and Easy Way to Design and Refine User Interfaces
by Carolyn Snyder

A bit old but, as far I remember, a really useful book. It explains how to build and test rough paper prototypes on users by role-playing a computer yourself.

Sketching User Experiences

Getting the Design Right and the Right Design
by Bill Buxton

How can we sketch interactions – something that happens over time? A bit of a rambling book, but with plenty of interesting ideas, techniques and historical perspective on interaction design.

The Design of Everyday Things

by Donald A. Norman

The usability classic.

I have to say, it’s been a while since I read it, but I remember it as an eye-opening experience. Door handles won’t look the same after you read this.

Web Form Design

Filling in the Blanks
by Luke Wroblewski

Good best practice for web form design. A surprisingly large amount of our interaction with websites is done with forms. Luke Wroblewski has distilled plenty of experience and research results into a concise book.

Designing for the Social Web

by Joshua Porter

A bit uneven as a whole, but outlines good methods and patterns for designing social software. The book contains a light description of activity-centred design as an alternative to Cooper’s goal-directed design.

For some more, see books tagged ‘design’ in my LibraryThing catalogue.

Do you have a personal favourite that is not on the list? Please let me know in the comments.

Attentive Light – Prototype 1

Wed, 22 Jun 2011 13:53:00 +0300

Attentive Light is another slow project that I’ve been working on together with Mikko Köykkä. It started from a personal need within my home: I struggled to find attractive light fixtures, so why not make your own – and make it interactive.

Home appliances are getting connected and “smarter”. The first Internet fridges were a flop in the dot com era, but this year there’s a new wave of WiFi-enabled fridges, washers, ovens and vacuum cleaners being introduced to the market. However, while they offer fancy technology, most of them don’t seem to make much sense for people (who wants to control an oven with a smart phone?). But maybe there’s something valuable to be found.

Attentive Light is a playground for exploring the possibilities and problems of automated lighting. The idea is to make it energy-efficient, highly functional and aesthetically pleasing, even poetic in everyday life.

The first prototype is a simple light fixture which turns itself on and off according to a pre-defined schedule and adapts its hue in line with the current weather, providing warm or cold light depending on the weather outside.

The prototype has a RGB-LED and a halogen lamp connected to a PC via an mbed NXP microcontroller. The PC runs a homegrown Python application that can be in automatic or manual mode. In automatic mode, the app gets the current weather information every hour from Yahoo and compares the current temperature to the average of past days.

The application sends control commands to mbed, which controls the power to lamps with pulse-width modulation. The RGB components and the halogen lamp can be controlled independently and there’s support for colour profiles for getting the right shade of white. No matter how you tweak the white point, LED light is still quite different from incandescent light. I would like to use LEDs for their energy-efficiency, but the quality of the light needs to be pleasing, too.

The next step is to add a movement sensor and a photosensor to give the system eyes.

The Audience – The Technical Bits

Thu, 05 May 2011 20:28:06 +0300

Here’s a technical summary of how my interactive installation was built.

The store window had three black and white TVs, two Vectrex games consoles and a TI-1200 calculator. Behind the scenes I had a video camera and some modern computers doing the magic. I did the “modern programming” myself, while Mikko Köykkä (the #1 independent electronics guy in Helsinki) built the custom hardware and did the microprocessor programming.

A hidden DV video camera with a fish-eye lens was connected to a Mac mini, which ran a custom-made Mac OS X application. The Mac app used the OpenCV computer vision library to track moving blobs (i.e. people) in the camera view. The camera was placed high up, looking down to the pavement to avoid seeing cars passing by.

The Mac OS X application ran a behaviour model for every creature. According to a set of rules, it decided what they should do, and then streamed behaviour messages (e.g. look left, smile, sleep, talk, etc.) to other machines. The PCs got their messages over WebSocket connections and the Arduino and AVR processor got theirs as serial communications over USB connections.

The PC laptops ran the Google Chrome browser and a web page that animated the face on an HTML5 canvas according to the instructions received over the WebSocket. The PC display image was turned into an RF-antenna signal that the old TVs tuned into.

The Arduino and related electronics on a breadboard converted the behaviour messages into analogue signals for the Vectrexes, which ran custom-made software programmed by Mikko. The software animated the faces on the Vectrexes’ vector screens like the HTML5 app on the PCs. The hidden AVR processor inside the TI-1200 animated the calculator screen.

All audio came from the Mac application. The audio acting was performed by Liisa Jokinen and me.

Thanks to the indispensable help from Niko Nyman (who is not only a great web designer and developer, but also a woodwork craftsman), the installation got a robust backdrop that made the screens stand out and provided a place to hide the camera.

All in all, the setup ran surprisingly smoothly, 24/7. The weakest spot was the tuners of the old TVs: they drifted around, and we had to perform minor surgery on the Luxor TV right after the vernissage. The Mac port of OpenCV also had an annoying memory leak in the camera view window, but it was avoided by not using it live.

Creating Believable Creatures

Wed, 27 Apr 2011 17:00:00 +0300

The Audience – Interactive installation, August, 2010

In my installation, I tried to turn old TVs and game consoles into lifelike creatures. As you walked by the window, the screens followed you with their eyes, raised their eyebrows, and commented in their own, unique language. However, as you stopped to watch them and tried to communicate with them, you became suspicious of their intelligence. Do they really see me? Why don’t they react to my gestures or expressions?

The first step to building an illusion of a believable creature is easy. Just add eyes, and anything can be turned into a creature. This can be more than enough in many cases. Consider Henry Hoover:

Eyes and mouth – Instant playfulness

The next step is to animate creatures. The creature needs to move and behave in believable ways—not necessarily realistically, but in believable or fun ways.

Step three: interactivity further increases expectations. People tend to use other people (and animals) as benchmarks for believable interactivity. This raises the bar quite high.

Think of Clippy, Microsoft’s infamous Office assistant. If a software feature looks like a living creature, (just add eyes to an animated paperclip!), and is bold enough to interrupt the user, the scene is set for trouble. But, even Clippy can be made likable if it exhibits some empathy and has a scapegoat. Professor Clifford Nass, at Stanford University, ran an experiment in which the software was otherwise the same, but in problem situations, Clippy teamed up with the user and put the blame on Microsoft. People fell in love with the new, empathic Clippy.

Habbo Hotel uses robot characters to act as hotel staff. Their purpose is to build a believable setting, serve drinks, and entertain users until they find “real” people to chat with. We couldn’t make the bots smart, so we made them quirky—a tactic to manage expectations. The bots’ flat jokes and weird comments evoke curiosity, and people soon figure out they are bots. As people accept them as simple bots, they lower their expectations and occasionally find the bots’ quirky comments fun.

Giving up can be a good tactic, too: Jesse Schell’s “The Art of Game Design” provides a lens (a design perspective) for this:

Only detail what you can do well. People have rich, detailed imaginations. If there is something you need to present that is of lower quality than your players will be able to imagine, don’t do it – let the imagination do the heavy lifting!

So, if meeting or exceeding people’s expectations is too difficult, some options for creating believable creatures are:

Side-step expectations with psychological tactics (like a scapegoat)
Find ways to lower expectations
Let imagination do the trick

Sketch of The Audience

Luckily, with my installation piece, people don’t expect a great deal from old TVs and game consoles. The faces that appear and follow people serve as an initial surprise that works well. This autumn, I will likely get to show the piece again and improve the creatures’ behavior — or find ways to further lower the viewers’ expectations :).

Holy theme

Fri, 22 Apr 2011 16:23:00 +0300

When I was a little kid I hid under the kitchen table with scissors and cut my Marimekko shirt full of holes. The visual theme of this blog is a tribute to that artistic performance.

The “holes” are HTML5 canvas elements that do their best to build illusion of another layer behind the main surface. As you scroll the page, the background layer scrolls slower, creating the classic parallax effect.

To cut your own holes, hold down alt-key and click around!

Technical lessons learned with canvas:

The parallax scrolling effect works best when scrolling is smooth (e.g. inertial scrolling on Mac) and page scroll redraws and canvas redraws are in sync. That depends on browser: Mac Safari works best, Firefox ok, Chrome stutters. On PC most browsers seem to twitch a bit.
Internet Explorer: Version 9 and up only. You could make a subset of canvas drawing work with older IEs with excanvas, but it lacks things like compositing modes.
On iOS, scroll event fires only when scrolling stops, so the effect doesn’t really work there.
I drew most of the shapes in Adobe Illustrator and used Microsoft MIX Online’s Ai to Canvas Plug-in to turn them into JavaScript.
I’m using Quasimondo’s fast StackBlur algorithm for the inner shadows. There might be a way to use the native canvas shadows but this was easier. To speed up redraws, the blurred shadows are drawn just once and stored in off-screen images. I do the same for the actual shapes, too.
You can use patterns as fill style, but you can’t control the offset. I’m drawing the background pattern manually in a nested loop.
Composite operations, especially with alpha bitmaps, work differently in different browsers. Basically you’re limited to a selected few that work consistently.
If you draw images from other domains (or subdomains) to a canvas, it gets “dirty” and you can’t access the raw pixels anymore. Security measure.
Hover and click checks on images are done in code. Tedious and inaccessible.

Slow blogging

Fri, 22 Apr 2011 16:04:00 +0300

Google Classic: Please Allow 30 Days for your Search Results. Image: dullhunk

As Habbo Hotel turned 10 years and is doing better than ever, I have taken some time of my own for the search of new ideas, inspiration and skills. This blog is for documenting things that I tinker with. It will be a slow blog. Instead of frequent, current posts, I’ll focus on occasional summaries of projects and ideas.

If you want to follow me, Twitter (sampok) is probably the easiest way. You can also grab the RSS feed, or follow on Tumblr.