Notebook

These are just more illustrations of the process I've been using for design iterations. When I have the Konigi notebook available, I'll be doing some screencasts to describe this process in detail, and why I felt the need to make these graph paper notebooks and pads.

What you see above:

1) Annotated UI Spec (Wireframes) after design review.

2) Sketches for design and new ideas, on the Konigi Design Notebook.

3) Refined sketches, inked and annotated on Konigi Wireframe Graph Paper.

4) The Pentax DSmobile 600 scanner I use to scan and post the sketches to our site for further discussion of design iterations and new ideas.

Luke Wroblewski pointed to Josh Bush's Masked Input Plugin for JQuery. Luke writes that the plugin "integrate(s) formatting cues directly into an input field to help signal how to correctly answer a question. These formatting instructions are automatically included in an input and cannot be removed by a user. More importantly, a user cannot enter other non-valid characters into the input field. Check out the demo at Masked Input Plugin."

The video Luke posted to YouTube, and the demo on Bush's site, show how the input mask works. Great example of an elegantly conceived method for error prevention in forms.

Poka-Yoke is a Japanese word for "fail-safing" that I just came across and suspect might be entering my UI vocabulary soon. The entry from Wikipedia:

Poka-yoke (IPA: [poka joke]) is a Japanese term that means "fail-safing", "Foolproof" or "mistake-proofing" — avoiding (yokeru) inadvertent errors (poka)) is a behavior-shaping constraint, or a method of preventing errors by putting limits on how an operation can be performed in order to force the correct completion of the operation. The concept was formalised, and the term adopted, by Shigeo Shingo as part of the Toyota Production System. Originally described as Baka-yoke, but as this means "fool-proofing" (or "idiot proofing") the name was changed to the milder Poka-yoke.

An example includes 3.5" floppy disk. The top-right corner is shaped in a certain way so that the disk cannot be inserted upside-down. In the manufacturing world an example might be that the jig for holding pieces for processing only allows pieces to be held in one orientation, or has switches on the jig to detect whether a hole has been previously cut or not, or it might count the number of spot welds created to ensure that, say, four have been executed by the operator.

Cafe Work/Sketch Kit

I gave my wife my MacBook to upgrade her from her iBook and got myself a netbook for those times when I'm out and need to wait for my son, and for watching Netflix/Hulu/Slingbox in the house. But I'm also finding that the netbook, a Lenovo Ideapad S10, is really pretty damned sweet for when I want to head out somewhere and do sketches in a cafe. I use it to post to our Traction server while I'm sketching. I just have to remember to put it aside so I can concentrate on getting the sketches done.

The S10 is small, but it sports a 10 inch screen. The only downside I've experienced so far is that the right shift key is positioned one key to the right, out of the normal positioning. They did this to make room for the directional arrows. I'm a touch typist, so I was afraid this would be a deal breaker. It's been about 4 days since I got it, and I'm quite used to the positioning now.

I spent a lot of time researching the netbook options in the past month and this one was up against the new HP Mini 1000, which got rave reviews, but which has one of those awkward side-positioned trackbpad buttons. After trying the Lenovo at a store, and having great experiences with the solid feel of IBM Ideapads for years as a corporate mucky muck, my decision was easily made. The Lenovo gives me greater hard disk storage options, not like the anemic SSDs. I know the tradeoffs, but I felt the HD options were fast enough. I'm not looking for sexy here, just affordable, light, fast enough, reliable enough (I say enough because it's Windows after all), rugged, and usable. It's got get thrown into a bag when I tool around town and hold up to my abuse.

All in all, I'm really very pleased with it. I's only been 4 days and I've taken it out only once, however, so we'll have to reserve final judgement after a month. It gives me what I need for a limited number of use cases. I won't design on it, but I can do a good deal of reading/writing/media viewing with it. I'm using Google Chrome for web browsing, and for my primary application uses: Gmail, Google Docs, and Google Reader. I'm absolutely loving it, by the way. I can bring my Pentax DS Mobile 600 scanner with me to scan my drawings and upload to our server when I'm out sketching.

That's all for now. If you're interested, you can click the Flickr photo above to see notes for what's inside my kit. Here's the contents:

1) Alchemy Goods Haversack, a 6 x 6 x 11 inch shoulder bag made of recycled bicycle inner tubes and a car seat belt. Love this little bag.

2) Notebook cords in a Kensington bag until I can get a strap to wrap them.

3) Glasses in a cheapo case.

4) The Konigi Designer's Notebook prototype, which you should be seeing more of on this site in '09.

5) Konigi wireframe graph paper pad in a vinyl pad holder.

6) Midori Traveler's Notebook with my weekly planner.

7) Lenovo Ideapad S10.

Not pictured is a the Pilot Coleur 0.5 mechanical pencil with 2B lead, and a Pentel Sign Pen.

I just wanted to take a moment to thank everyone who took some time out of their busy days to read Konigi this year, to provide their feedback and commentary, to download my tools, to buy notepads, and to help me keep a dialogue going with you, my new and old design and development friends. This has been a very rewarding first year playing with this blog, and I feel light years away from those years spent doing iaslash.

I wish you all a safe and happy holiday season. I'll be slowing down quite a bit in the next few weeks to spend time with my family, but will return in the next few months with some improvements and surprises on this site.

-Michael

The second part of Stephen Chambers' series on designing the ANTS Profiler tool, a .NET code profiler, discusses how a team leader challenged a group to really work collaboratively on developing the concept for the tool's interface by taking away computers and requiring that the team work with only paper, whiteboards, pencils, and markers.

James, the team leader had just read Bill Buxton's Sketching the User Experience and wanted to try to get his engineers to rally around the idea that everyone can participate in this ideation phase, and no one needed any specific skill to propose and sketch ideas. After some initial discomfort, a few people got the ball rolling, and then as the ideas started flowing, constraints and possibilities were clarified, revelations ensued, and useful design directions manifested themselves.

Stephen writes that the 2 main things he took away from the exercise were:

  1. It’s easy to generate and explore new ideas when everyone is sitting around a table with a pencil and sketchbook to hand.
  2. You don’t have to second guess what someone is thinking. We often just said “Don’t try and tell me – show me.” Two minutes later you had the idea on paper, concrete and unambiguous.

This is a wonderful example of how to get everyone (especially engineers!) on your team involved in concrete idea generation. There's no need to fear failure or criticism of ideas because sketches are disposable, but by having the ideas shown rather than just discussed, concepts become inherently clear rather and can be quickly refined or discarded with much less lost time when compared to first doing the work in software. The method used here might be a little extreme--taking all the computers out of the room for the duration of the exercise--but the benefits are clear, given the observations in Stephen's telling of the results.

That's BJ Fogg in my wireframe screenshot on Flickr, sporting a Santa hat and beard.

This was spotted via Lifehacker. Add a note with the text "ho ho ho hat" to get the hat, and "ho ho ho beard" for the beard. I ♥ Flickr.

Jason Santa Maria's 24 Ways entry provides a very simple explanation of the modular layout strategy he uses. THe example html/css is super simple and easy to read, and the article itself is a short and easy to digest. We need to see more concise instructive articles like that.

underln is a really simple vote to promote site by smashLAB to scoop any topic or site related to the fields of advertising, marketing, and design. Only 2 inputs: title and URL, and only Title is required.

I just came across two Growl-like alert plugins that should be of interest to HTML prototypers. Growl is a Mac OS X application that functions like a service that other applications can use to show unobtrusive messages in the monitor when things happen on the system.

These javascript plugins work for the Moo Tools or JQuery libraries to provide small in-page layers in a corner or center of the page to do such things as show AJAX alerts for new content updates, e.g. show when new articles posted as iminlikewithyou does, or show changes in page state when someone is editing a wiki page perhaps.

The screenshot above shows the Window Growl plugin with 2 different types of messages in view.

Scribbles is perhaps the simplest drawing program I've ever tried. The app, created by atebits, gives you 4 tools: brush, move, pan, and zoom. There are 12 brush styles, a color picker, a big slider for brush size, and a layer manager.

It looks deceptively simple on the surface, but when you explore a bit, you'll find some really interesting functionalities that even the advanced Mac freehand drawing tools like Sketchbook and ArtRage don't do well. One is the tracing paper mode, which gives you a transparent canvas so you can position the window over anything on screen. The other is the infinite canvas, which lets you zoom out infinitely to widen canvas by just dragging a magnifying glass cursor. It's pretty wild, and you kind of get a sense of scale of your zoomed canvas when grids are on.

Seems like kind of a fun toy, but I'm sure you could do a lot more with this if you got creative.

Peter Flynn gives a demo of wireframing in Adobe Flash Catalyst, aka Thermo. Every online demo I've seen of this product looks more and more exciting, and this is truly going to give Mac users a way to do easy interactive prototypes as our PC brothers and sisters can do with tools like Axure. I fully expect to be using this thing when it gets out of Preview release. It's only slightly ironic that his first 5 minutes are talk about how wireframes are by definition, low fidelity, given my last post. :)