Blog

Memory is the diary we carry around with us

Ed Parker on Competition

"It is always better to improve and strengthen your own line or knowledge than to try and cut your opponent's line."

—Ed Parker, Martial Arts Instructor and Author

Will Wright on Game Play and Education

Will Wright's talk at the Summit on Science, Entertainment, and Education looks at how game play can be relevant to education. These are my notes from this talk.

How we process information

Our basic model for processing and acting on data that we receive in the world looks something like this:

- Behavior
- Models (Predictive) ↑
- Schema (Abstractions) ↑
- Metaphors (Patterns) ↑
- Examples (Data) ↑

How our minds work when we play games

Games become relevant in education because they offer a more effective way to use and build knowledge.

Game play is about:

- failing
- changing your model
- repeating

Game players, through experimentation and repeated failure, ramp their model of the game up over iterations of play. Their model becomes more complex as their understanding and ability to succeed increases over each interaction and learning experience.

Wright tells a story about a pottery class, in which a teacher tells one group of students that their grade will be based on one single pot they are produced. The second group is told their grade will be based on the amount of pots they produce. The second group ended up with the highest grades.

When your work is based on building the most rather than creating the perfect work, you fail repeatedly, update your model, and produce the best work.

What makes a good educational experience

Wright applies what James Paul Gee lists as attributes for a good education experience and says these are the same for game play.

- allow identity
- offer a reason to do it
- allow and mitigate risk
- encourage failure
- provide situated meanings: you're learning for things you immediately need
- get you out of ordered problem solving

Blurring the lines of maker/player

In addition to becoming effective tools for learning, the game community is blurring lines between the game ecology and the community. Social experiences afforded by games like Spore and LIttle Big Planet are good examples. Players become creators and contributors. Learning and creation and contribution are one and the same.

Thanks to Alex for pointing me to this vid.

http://vimeo.com/22670388

Read "Mobile Design & Development" free online

Brian Fling's book, Mobile Design & Development, published by O'Reilly in 2009, is available to read in its entirety online. Fling says he says 75-80% of the content of the book (which is some 68,000 words) is up to date and extremely relevant as of March 2011.

More from the author:

I wrote this book to have something for everyone interested in designing in developing for mobile devices, regardless of experience and regardless of the application. The first half is a crash course in the mobile ecosystem: how to develop a strategy, address the mobile context—even how to decide which of the multiple mobile application types is best for you, and finally, how to create a user experience for it. The second half is focused on using these principles to make a mobile website or web app.

This means this book isn't for anyone looking for a quick fix to the “mobile problem.” As I told my excellent editorial team throughout the writing process, “this is a book that teaches people how to cook, not a collection of recipes.” However being O'Reilly's first book on mobile, we decided to cover a lot of ground, basically detailing mobile from it's origins to the devices of tomorrow.

Read at the book site.

http://mobiledesign.org/

Have a nice day

Don't let anyone tell you that the tools you choose are wrong or inappropriate. Find the right design and keep winning.

Occasionally I'm asked to provide an opinion about a topic that people think I should have some authority to comment on for some reason. That topic, as you might guess, is wireframing.

I enjoy pointing people towards good resources, or helping them with a problem using a tool that I'm familiar with. I also love to give my own design resources to peers, or to teach techniques that I think will help people perfect their craft. In the end, I benefit from that exchange the most.

When asked to comment on slanted opinions that throw a stake in the ground and tend to confuse and divide the community, I abstain. Navel gazing and defining the damned thing became an uninteresting use of time to me long ago. It took some time immersed in those conversations to know that I have nothing to contribute. I'd rather be making stuff than talking about it. I just say call yourself whatever you like, and do whatever works.

Interface design tools are as good as you make them. When I started out, I had to use Visio to communicate UI specs. It wasn't awesome, but I made it work. Later I found Omnigraffle. It was not designed specifically to enable interface designers, but we made it awesome. We learned how to use it to make our documents communicate design ideas.

We are the ones who determine what's useful for us after immersion in tools. We've debated what we want in the ultimate IA tool, we've found parallels in other industries and fields of practice and made them our own. We've experimented with forward-looking low-fidelity prototyping projects like Denim, and pondered what the right suite of tools are for our work. Some of us built them and shared our work. Some of us are still building them.

Over years of working and watching others work, I've noticed that some attributes are common among the people whose work I admire. The people who are the most effective seem to continue to study their practice, and perfect their craft. After long hours of use, they find the way to flow within any app at their disposal, and become as fast and effective as they can using it. The key is what they do with the app once they've become expert at their craft, expert in finding the right design, expert in communicating, and expert in refining. There's some kind of maker/doer tenacity I see in people, and it doesn't have to do with any one tool.

There are no good or bad tools for finding the right design. Paper prototypes are your thing? Awesome. If you want to sketch and go right to building in HTML? Go for it! I've done it. You want to craft gray box schematics in OmniGraffle, Photoshop, or Mockups? Godspeed you wireframer. Maybe I can help you with that. You want to use a tool that generates interactive prototypes? Have a nice day. :)

All the side-taking is useless to me. If you've ever interviewed people for an IA or IXD position, you know that beautiful documents and prototypes are meaningless if in the end they don't demonstrate good problem solving and good design decision making. I don't care what people use. They can use finger puppets and crayons if they help them.

I say use whatever makes sense or is at your disposal. Your tools are only as effective as you are at using them to accomplish goals. But don't let anyone tell you that what you choose is wrong or inappropriate. Find the right design and keep winning.

MORE/REAL Stylus Cap

Don Lehman's MORE/REAL Stylus Cap is a cool iPad stylus project looking for funding via Kickstarter. The idea is to create a cap with a conductive tip that will fit over a Sharpie, Bic, or Fineliner pen. Lehman's introductory video below shows the stylus cap at work.

Looks fantastic and simple, and you'll have one fewer thing to carry with you because it acts as pen and stylus. Sweet. You can help fund the project and reserve a cap by heading to the Kickstarter page.

Via Core77 and @jenniferhogan

https://www.kickstarter.com/projects/1004382302/more-real-stylus-cap

iPad Dry Erase Board

New sketching goodies hit the shelves at UI Stencils, from our good friends Design Commission. They've created an iPad dry erase board with dot grid, and updated their awesome iPhone sticky pads. Definitely want to get my hands on the dry erase board.

Update:
Mine arrived and I have to say that this is the nicest dry erase board I have now. It's made on hard particle board, similar to what you'd find on a clipboard, so it feels great in the hands. There's an interaction key laminated to the back with gesture symbols and common icons, to help you while you sketch. It comes with 2 fine point dry erase markers with eraser heads that work well.

I'm loving it, and so is my son, who plans to use it for stop motion animations. I'm not working on iPad design right now, so I'd love to have a few screen and browser dry erase boards, or a 6-up/8-up sketchboard for thumbnail sketches and storyboards.

http://www.uistencils.com/products/ipad-dry-erase-white-board

New Blinksale payment options

Freelancers and design/dev shops have some better invoicing options at Blinksale. They just announced a new feature called BlinkPay that will allow clients to pay invoice by credit card without you having to pay for an expensive merchant account. It's a nice alternative to PayPal. Some beautiful interface design work by Jared Christensen in there.

Disclosure: Blinksale is one of Konigi's advertisers.

http://www.blinksale.com/2011/02/blinkpay-is-here/

Sketch, sketch, sketch

The sketch is not the end goal. The end goal of the drawing process is what you learn while sketching.

I'm slowly getting back into the groove of reading blogs and updating this site after some time off to enjoy the first month with our new baby. I found 52 weeks' recent post about sketching, and loved the encouraging reminder for UX designers. I'll quote, because Joshua Brewer says it so well.

[D]on’t worry if you can’t sketch. In fact, if you’re too good you might just fool yourself into thinking your sketch is a deliverable. It’s not. The real value of sketching is that it allows you to explore and refine ideas in a quick, iterative and visual manner with little overhead or learning curve. Rapid ideation around flow and interaction, layout and hierarchy, can be quickly established, rearranged or discarded wholesale—all without ever touching a computer.

I like the reminder that sketching is thinking. For me, it is the thought process, decision making, and learning, not the quality of the product in this activity that makes sketching an important part of the design process. For me it even continues from sketch to wireframe. The lines blur when you can discard and start over easily and repeatedly in whatever medium.

http://52weeksofux.com/post/346650933/sketch-sketch-sketch

Sketchnotes 2009 & 2010: A book by Eva-Lotta Lamm

This is pretty incredible. Eva-Lotta Lamm's self-published book contains 2 years' worth of illustrated sketchnotes from dozens of UX / Design events and conferences, featuring talks from over 100 speakers and panelists.

Some of the events covered in the book are UXweek 2009, d.construct 2010, Flash on the Beach 2010, UXcamp Europe 2010, offf 2010, UXcamp London, Internet Week Europe 2010, various London IA events and RSA talks.

The book contains notes from talks by Edward Tufte, Scott McCloud, Jesse James Garrett, Ryan Singer, Tim Berners-Lee, Stephen Fry, Dave Gray, Whitney Hess, Stephen Anderson, Andy Budd, Richard Rutter, Eric Reiss, Giles Colborne, Mr. Bingo, Julien Vallée, Matt Pyke, David MacCandless and many more. You can see examples of Eva-Lotta's sketchnotes on flickr.

More info about the book here at her book site. I just purchased a copy for myself.

http://www.evalotta.net/sketchnotes/

What Makes Them Click

I just started reading What Makes Them Click, Susan Weinschenk's blog for people who want to learn how to apply psychology to understand how people think, work, and relate.

"The blog focuses especially on applying the latest research in psychology to make you more effective, be more successful at your work and in your career, and get to know better why you and the people around you do what you do."

Susan wrote the New Rider's book, Neuro Web Design: What makes them click, which applies the latest research on unconscious mental processing and persuasion principles to the design of web sites. Read more at the What Makes Them Click site.

http://www.whatmakesthemclick.net/

Refactoring for designers

Ryan Singer at 37signals explains code refactoring to designers so that they can use it correctly in a design context.

Designers sometimes use the word “refactor” in a loose way. I think they overhear the word from programmers without getting the precise meaning. This article will introduce the term to designers so they can gain the same advantages that programmers have from a clear understanding.

How do designers loosely understand refactoring? Many take it to mean “rearranging” a design or “adjusting without completely rethinking” it. Refactoring actually means something else. It means changing the way a design is built without changing the way it looks from the outside.

Read more at svn.

http://37signals.com/svn/posts/2738-refactoring-for-designers

iPad Stylus Roundup: And the winner is...

[Update: This review was updated after getting the latest version of the Stylus Socks.]

My search for the perfect stylus for sketching on the iPad is over. I've tried ever stylus I could get my hands on. The three finalists that earned a space on my desk or pocket in the past year have been the iClooly, the Stylus Socks, and the Griffin Stylus for iPad.

Starting off on the wrong foot

I started out initially playing with a few rubber tipped styli and the Pogo Sketch. I had to hack the Pogo Sketch to make it glide, which I still think is an elegant hack. I even contacted the creator about my hack but he didn't seem to care much for the idea of having a plastic nib inserted in the conductive foam, so I gave up on that. All of the rubber tipped styli created too much friction to be useful, and I didn't see much promise in the hacks that involved scraping a metal snap across my glass screen. After those experiences I set out to find the perfect stick to take out with me to supplement sketching on paper.

I have 2 main criteria by which I judged the styli.


  1. The tip should glide smoothly with as little friction as possible on the screen so that sketching feels natural

  2. The stick should be long enough to fit comfortably in the hand

The finalists

iClooly ($14.95)
The iClooly uses a small, soft metallic brush tip that seemed to glide the smoothest on the screen, but the metal stick is too thin and short to use comfortably for more than the shortest sketching sessions. I used this consistently for at least 6 months and found it exceptional. I came up with an inelegant hack to extend the stick, and that served me well, but who wants to use an ugly hacked stick?

Stylus Socks II ($7)
The Stylus Socks II sold by Shapedad on Etsy are a clever solution that wraps the end of a plastic KOH-I-NOOR pen holder with a conductive fabric. My initial review of the Stylus Sock was based on my use of a prototype version, but I've since received the final version which includes a felt tip under the fabric. The best thing about this stylus is the long stick, which makes it the most usable of the bunch. At only $7 a stylus, this may be the best choice for the budget-conscious sketcher. It works very well and it feels good to support an independent maker. At this price I think this may be the perfect solution for most people. One thing I would like is a heavier version. I may try to purchase a metal pen holder and move the fabric over to that one.

Shapedad is also working on a prototype mouthstick for people who don't have use of their arms, prompted by a request to make a long stylus for a quadriplegic customer. You can watch his progress in his Flickr photostream.

Griffin iPad Stylus ($18.99)
Someone finally tipped me to the Griffin iPad Stylus in November and I started watching the videos of users on YouTube and was easily convinced that it could be smooth enough. I was skeptical at first, but the rubber tip is surprisingly untacky and glides smoothly with little friction. It's slightly less smooth than the iClooly, but the biggest positive is that the stick is thicker and resembles the thickness of a pen or marker. It feels great in the hand, and it's long enough to reach from my closed index finger and thumb to rest between the two fingers. The clip slides nicely onto the spine of my iPad cover.

And the winner is...

The Griffin was my initial winner among the three. Although it's the most expensive, it works well and I like the metal stick, which I found to be the right thickness. The clip also helps me keep it tethered to the iPad case. After I received the final version of the Stylus Socks II that included the felt tip under the fabric, I found this stylus to be equally as effective as the Griffin, and glides more smoothly. I think they're both good choices.

I still find sketching on paper superior to sketching on the iPad, but there are definite advantages to immediately having an image to share digitally. iPad sketching has a permanent place in my toolkit, and the Griffin is my weapon of choice. Hopefully this will be the last in this year-long series on finding the right tool for this task.

HTML5 Boilerplate: A rock-solid default for HTML5

I stumbled on Paul Irish and Divya Manian's HTML5 Boilerplate after looking for a solution to fall back on a local jQuery library if Google's CDN ever went south, and reading about how to use this technique for WordPress. Ben Kutil also helped me undersand how the fallback technique works a little bit, and I tested and implemented on Balsamiq's site.

HTML5 Boilerplate is not a library, but a template and set of awesome examples for how to get started integrating HTML 5 into your sites. They provide techniques for future-proofing HTML/CSS/JS, with cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash in mind. They also give you a starter apache .htaccess config file with caching rules and prep your site to serve HTML5 video, use @font-face, and use gzip.

Check out HTML5 Boilerplate. You can also watch a screencast of Paul Irish demonstrating it on Nettuts.

http://html5boilerplate.com/

Word Lens: Translation using Augmented Reality

This is one of the most practical uses of augmented reality I've seen. Word Lens translates text you capture from an iPhone's camera to another language. I think it's only Spanish-English/English-Spanish at the moment, and $4.99 per language.

If you're skeptical, as some YouTubers seem to be in the comments, you can see an example of the translation I did on my phone of an English magazine page to Spanish. Works best on big text, and probably most practical for signage. I need this for trips to Italy (my Italian is rough), so hopefully Italian will be available in the future.

http://questvisual.com/

Fourth Annual Blue Beanie Day

It's 11/30, Blue Beanie day.

It’s easy to show your support for web design done right. Beg, borrow, or buy a Blue Beanie and snap a photo of your mug wearing the blue. (Or get creative with Photoshop). Then on November 30, switch your profile picture in Facebook, Twitter, Flickr, (and any other social network) and post your photo to the Blue Beanie Day group.

Twitter - http://twitter.com/BlueBeanieDay or search #bbd4
PlanCast - http://plancast.com/p/2kuh
Flickr - http://www.flickr.com/groups/bluebeanieday2010/

You can have my 8 bit beanie PSD here/

http://www.facebook.com/event.php?eid=153180248051749

Mockups 2.0: the Symbols release

We've release Mockups 2.0 at Balsamiq. The main feature in this release is the Symbols functionality. It allows you to reuse groups of controls in order to create templates, page masters, and libraries of re-usable components. This can be done globally for all of your projects, or locally within a single project. You can create symbols from the top down and the bottom up. There's some documentation for this somewhat advanced feature here: Working with Symbols. To try it out, download or update Mockups on your machine.

http://blogs.balsamiq.com/product/2010/11/30/mockups-2-0-the-symbols-release/

Hacking an iClooly iPad Stylus

The iClooly is the pen I've been using most for quick sketches on the iPad, but for longer sketches and for drawing the handwritten font I'm making in iFontMaker, the short stick kind of sucks.

Extending the iClooly stick is an easy hack that almost doesn't merit a post: rip off the back, take apart a mechanical pencil, and mash the two together.

Verbose version: Remove the clicky end and the spring inside, making sure the brush is pressed down and the bristles exposed. Find a cyclinder that the iClooly will slide into--I'm using the plastic housing of a Sanford mechanical pencil--and push the iClooly into the cylinder.

Sarah Sampsel on Designing The Washington Post for iPad

Sarah Sampsel wrote about designing the Washington Post iPad app, in 2 entries describing a little bit about the process. The first entry describes the types of interaction, visual design, and brand issues she had to consider when designing for the device. The second shows a few wireframes of the evolution of the home screen design.

Would have been lovely to also see some of the sketches, but it's awesome that Sarah shared not just final wireframes, but a series of wireframes showing the iterations. I'm hopeful that she'll continue the series to discuss the visual design and some post-launch thoughts.

http://www.sarahsampsel.com/blog/2010/11/10/designing-the-washington-post-for-ipad-detailed-wireframes/

Where Good Ideas Come From, by Steven Johnson

Chance favors the connected mind.

I just picked up Steven Berlin Johnson's Where Good Ideas Come From after watching this sketch-note summarization of the ideas in the book.

I became a fan of Steven's after reading the New Yorker article "Watching TV Makes you Smarter" and his book, Everything Bad is Good for You. This one looks like it will be an interesting read. I'm hoping it's full of stories of long drawn out infancy of ideas, and the collisions and connections that make ideas succeed.

Found via Caterino's Deli

https://www.youtube.com/watch?v=NugRZGDbPFU

CSS Tooltips and Speech Bubbles

I've been using some new CSS techniques lately, and thought it was time to start experimenting with ideas. One thing that I thought was really cool was that you could use the :before and :after pseudo-classes to create boxes before and after an element and position those. I did that on the little screenshot images on this product page, to position the little + icons.

I was also interested in how I could replace some of the jQuery techniques I was using to make tooltips in myBalsamiq. One thing that bothered me about the technique in jQuery UI was that I had to use an image to create a triangle below the tool tip box. A quick search turned up a technique for creating a triangle with CSS on a demo by Jon Rohan. Jon's technique uses a few spans to create the awesome outlined bubble. I thought I'd go simpler and just put a box shadow on the main part of the bubble so I could get rid of the spans, and then I'd just use the :after pseudo-class to position a box that created the triangle below the bubble. The result is below. This has been tested in Webkit only.


Speech Bubble

Demo

Hi there. I like turtles.

Mikey sez

Code

<div class="bubble">Hi there. I like turtles.</div>
<p style="margin-left: 1em;">Mikey sez</p>

.bubble {
  position: relative;
  background-color:#eee;
  margin: 0;
  padding:10px;
  text-align:center;
  width:180px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25);
  box-shadow: 0px 0 3px rgba(0,0,0,0.25); 
}
.bubble:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: #eee transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:1em;
}


Tool Tip Try 1

This one is a little trickier, because the browser will display the yellow tooltip fro the anchor as well. You could hide the title attribute by using $("a.tip").removeAttr("title"); but that's where I'm getting the tip from. This is one case where using a hidden span nested in the link might be smarter.

Demo

Hover over me!

Code

<a href="#" class="tip" title="Hi, There. I like turtles.">Hover over me!</a>

a.tip {
  position: relative;
  text-decoration: none;
}
a.tip:hover:before {
  display: block;
  position: absolute; 
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;    
  color: #fff;
  font-size: .86em;
}
a.tip:hover:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  top: -8px;
  left:1em;
}



Tool Tip Try #2

This time using a span without the pesky anchor tooltip.

Demo

Hover over me!Hi, There. I like turtles.

Code

<a href="#" class="tip2">Hover over me!<span>Hi, There. I like turtles.</span></a>

a.tip2 {
  position: relative;
  text-decoration: none;
}
a.tip2 span {display: none;}
a.tip2:hover span {
  display: block;
  position: absolute; 
  padding: .5em;
  content: attr(title);
  min-width: 120px;
  text-align: center;
  width: auto;
  height: auto;
  white-space: nowrap;
  top: -32px;
  background: rgba(0,0,0,.8);
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;    
  color: #fff;
  font-size: .86em;
}
a.tip2:hover span:after {
  position: absolute;
  display: block;
  content: "";  
  border-color: rgba(0,0,0,.8) transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom: -16px;
  left:1em;
}

POTD: J.K. Rowlings Plot Spreadsheet for Harry Potter and the Order of the Phoenix

Love this post on /Film showing a few artifacts from J.K. Rowling's creative process. Rowling uses spreadsheets she draws by making grid lines on plain paper, creating columns to outline a book's plot along a timeline, with months progressing downward. The initial columns contains a title and blurb about the plot, and further columns contain info about sub-plots. The excerpt below describes this in detail:

Rowling outlines each chapter in detail including which month of the school year it takes place in, the title and the plot. All of that seems standard. But it’s the next few columns where things get really good.

She keeps track of all the book’s subplots in every chapter and how they are developing in the real world of the book, even if they aren’t mentioned on the page. So, there’s a full column on “The Prophecy” which is the main subplot Harry is worried about throughout the book. Then there’s a column for the romantic subplot, titled “Cho/Ginny” followed by “D.A.” which follows what’s going on with Harry, Ron and Hermione’s resistance group “Dumbledore’s Army,” one called “O of P,” a column about what’s the latest with the “Order of the Phoenix,” a.k.a, the people who believe Voldemort is still alive, then separate columns for Snape (and others, I can’t read Rowlings writing) and the Hagrid and Grawp story.

Read more on /Film.

Via +Subtraction

http://www.slashfilm.com/2010/10/08/potd-jk-rowlings-plot-spreadsheet-for-harry-potter-and-the-order-of-the-phoenix/

1st Interaction Design Contest | Building the Internet of Things

IDAT, the Institute of Design, Art and Technology of Barcelona is holding its 1st Interaction Design Competition based on the theme of designing applications for the next generation Internet of Things.

The competition calls for ideas of interfaces, interactions, and applications that can be designed with technologies such as embedded Radio Frequency Identification (RFID), short-range wireless communication, ubiquitous data networks, mobile devices, hardware prototyping tools and digital fabrication.

The deadline to submit projects is December 15, 2010, and the award is 16.000 euro. If you haven't already started tinkering with physical computing, this may be a good opportunity to start. ;) Find out more about entry details.

http://www.interactiondesigncontest.com/?lang=en

Overhauling Balsamiq.com

We launched an overhauled Balsamiq.com this week and I wrote about the effort. In addition to doing interface design on the product (myBalsamiq mostly up to now) I also get to be the "webmaster." :) What that means in our small startup is doing the user research, interface design, visual design, and front end development. If you know me, you know that I dig getting to do more than one thing, so that's a win.

In any case, take a look and see how we evolved our little site. I'm planning to do another article on some the CSS 3 techniques I learned, but this high level blog entry will give you an idea of what I learned doing this project.

http://blogs.balsamiq.com/ux/2010/10/15/overhauling-balsamiq/