Notebook

I just came across typeface.js, a type face replacement method like SIFR and FLIR, that lets you embed custom fonts in your pages using CSS. On the backend, javscript is used with or VML to draw the glyphs for your fonts.

Compared with SIFR, this suffers from some issues. Biggest one perhaps is that you can't select text since it's rendered as an image. Not so with SIFR. I wouldn't go using this method for body text, but if you're already considering doing image replacement for elements like headings, this would be a library to watch. There's bound to be accessibility improvements in the future using methods that put invisible text over the image, or something like that.

UX London is a three-day event for user experience designers that combines a day of inspirational conference with four half days of practical, in-depth, hands-on workshops, all presented by some of the biggest names in the industry. Speakers include Don Norman, Leisa Reichelt, Dan Saffer, Luke Wroblewski, Jared Spool, Jeff Veen, Eric Reiss, and Peter Merholz. If I were in Europe I'd definitely want to be there.

It seems it's time to start spilling out some of the meta-discussion in my head--the monologue I guess--about what I'm doing here on Konigi. So I started to post announcements and thoughts about what I'm working on with a Konigi Twitter account.

Basically, I feel like I want to separate Konigi-specific postings from my regular Twitter stream so I can update interested readers via that account, as well as post more work in progress commentary, observations, and announcements related strictly to Konigi. So if Twitter suits you more than RSS or Email, or if you're interested in my back-channel banter, you can get updates there.

There's also a product page for Konigi now on Facebook.

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.