Konigi

Touch User Interface

jibbajabba — Thu, 19 Nov 2009 15:25:39 +0000

I just discovered Touch User Interface, a blog that reports regularly on touch interface projects, and provides links to resources related to designing for touch screen interfaces.

ixEdit: Visual Tool for Prototyping with jQuery

jibbajabba — Thu, 19 Nov 2009 14:44:55 +0000

ixEdit is a JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on your web pages. It's specifically designed for HTML prototyping and allows designers to build interactive interfaces directly in the browser, and provides the code to copy and paste into the HTML page.

Works with Firefox, Safari, Chrome, or IE. Watch the video below to see how it works.

I haven't minded writing the jQuery for the prototyping toolkit I've been working with, but this is much better for a lazy, sloppy coder like me. So I'm including this as well.

Via @5w

Meet the super-light HTML prototyping toolkit in under 3 minutes

jibbajabba — Tue, 17 Nov 2009 22:30:41 +0000

This is a demo of an HTML Prototyping Toolkit that I've assembled from a few open source libraries. The idea is to create something super light so you can sketch your wireframes in HTML.

Using Templates

I'm using a jQuery template for creating columns in a grid.

Columns look like this:

{cols}  <-- grid layout container
  {col12} <-- 12 unit column
  {/col}  <-- closed column
  {col12last}  <-- 12 unit column
                   last in container
  {/col}
{/cols}  <-- end of container

You can try out the prototypes I'm playing with here:

http://www.konigi.com/protokit/projects/tsi-proteus/index.html

If you have Firebug, inspect the page to see what the templates are building.

Works with ixEdit

As I said above, this is meant to be super light and uses existing libraries. I'll start posting the code when it's cleaner.

Chroma-Hash Password Masking

jibbajabba — Tue, 17 Nov 2009 17:29:50 +0000

Chroma-Hash is a jQuery script that Mattt Thompson created to explore a visual method for confirmation password matches during confirmation on login and registration forms. The idea is similar to Identicon, but uses a small colored bars in the input to visually check your strings. He describes the project on Mattt.com and you can try the demo out on GitHub or download it. Versions supporting other libraries are also linked from this page.

Via Pauric

iPhone-like Passwords using jQuery

jibbajabba — Tue, 17 Nov 2009 17:21:07 +0000

Stefan Ullrich's jQuery plugin on the DECAF site provides a behavior for masking passwords that is familiar to mobile users. The plugin obscures previously entered characters at delayed intervals or when new characters are entered. It falls back on using the browser's password masking when JS is disabled.

Confirming Passwords Is Annoying: Is There a Better Way?

jibbajabba — Tue, 17 Nov 2009 15:18:43 +0000

This an article from March 09 by Kevin Vigneault of Viget that explores some techniques using Javascript to create more usable password inputs in forms. The ideas range from using a checkbox or button to temporarily show the password or changing type from text to password when the input is not in focus. Great ideas.

If you're interested in this topic, you might also want to check out Chris Dary's experiments with password masking.

Log in or sign up?

jibbajabba — Tue, 17 Nov 2009 14:15:48 +0000

Leah Culver discusses the design of hybrid sign up / login forms, showing a few examples and the final form as implemented for Leafy Chat. Uses the familiar I'm a customer/I'm new here radios that we know from Amazon, but positions it before the password field, which I find an improvement over the Amazon implementation. Lots of ideas in the comments.

6 Things Video Games Can Teach Us About Web Usability

jibbajabba — Mon, 16 Nov 2009 16:06:08 +0000

Mark Riggan makes some interesting observations about design strategies and techniques used in video games that keep the experience usable, and suggests how these ideas apply to designing for the web.

Ultimate Guide To Grid-Based Web Design

jibbajabba — Tue, 10 Nov 2009 20:42:49 +0000

Noupe offers up a complete guide to techniques and tools for designing web layouts with grids. Includes basic information about grid design, links to more articles on specific aspects of grid-based design from other sites, links to all of the CSS grid-based layout frameworks I've heard of and a few that are new to me, and showcase of sites.

Via @zakiwarfel

Mockingbird

jibbajabba — Tue, 10 Nov 2009 17:12:58 +0000

Mockingbird is a web-based service for quickly creating multi-page, click through wireframes or prototypes using a library of UI components. It's written on the Cappuccino web framework, so the prototypes don't require Flash.

Protoscript: Prototype Scripting Library

jibbajabba — Tue, 10 Nov 2009 15:57:11 +0000

Protoscript is a prototype scripting library utilizing both jQuery and YUI behaviors to add interactivity to HTML elements. By combining different behaviors with different elements and events you can create complex interactions without writing JavaScript.

Via @egregilon

The Process Toolbox, part eight: Prototyping

jibbajabba — Mon, 09 Nov 2009 15:26:44 +0000

Simon Collison writes about the different forms of prototyping in ErskineLabs' Process Toolbox, describing the benefits of paper, wireframe, and browser prototypes.

As much as all parties may talk about requirements and argue over features, often they won’t really “get it” until they can see the concept represented visually, and understand its exact behaviour. This brings us on to various methods of prototyping.

Found via I ♥ wireframes. Read more at Erskine Labs.

Sketchy Axure Widget Library

jibbajabba — Fri, 06 Nov 2009 21:38:24 +0000

Ascentium have posted a library of sketch-style wireframe stencils/widgets. You can view more information and download the stencils from their blog and view a functional prototype of the widgets.

Usabilla Travel Site Test: Underdogs beat Expedia in usability showdown

jibbajabba — Fri, 06 Nov 2009 21:22:18 +0000

Usabilla was ran usability tests to compare the usability of four travel sites and has posted the results. Their analysis concludes that Expedia gets defeated by its competitors Hotwire, Priceline, and Travelocity on basic usability tasks. Expedia performed the worst in a usability showdown between the four major international travel sites. A total of 148 people participated in this usability test and tried to perform three basic tasks on one of the four websites.

Read the result analysis at the Usabilla blog.

Annotating Specs With Tracing Paper

jibbajabba — Thu, 29 Oct 2009 15:02:58 +0000

Donna Lichaw posted a photo showing a nice method for annotating specs using tracing paper or vellum.

Michael Bierut: 5 Secrets from 86 Notebooks

jibbajabba — Wed, 28 Oct 2009 14:33:34 +0000

This is fantastic presentation from Pentagram's Michael Bierut at The 99 Percent conference. Shows how a quiet, humble, and empathetic bedside manner can be such useful attributes in a designer.

Renowned graphic designer Michael Bierut claims that he's not creative. Instead, he likens his job to that of a doctor who tends to patients – "the sicker, the better." Digging into the 86 notebooks he's kept over the course of his career, Bierut walks us through 5 projects – from original conception to final execution – extracting a handful of simple lessons (e.g. the problem contains the solution; don't avoid the obvious) at the foundation of brilliant design solutions.

View more videos and register for the upcoming 99 Percent conference.

Finding Focus While Trying to Work

jibbajabba — Tue, 27 Oct 2009 22:08:46 +0000

How I try and occasionally succeed at finding focus.

Ambient information and notification is killing me; so much so I'm mostly avoiding email, I'm disabling Growl notifications for apps, and looking at stuff like Tweetie on my own time rather than leaving it always on. I have to admit that I occasionally have a hard time focusing on tasks and have sometimes put more effort into tweaking my systems for getting things done than I should. All for the greater good of finding a better way to be productive, I say. I am of course fooling myself.

I have found some practices rather useful for getting things done, and mostly they involve 2 things: 1) turning off the ambient noise and, 2) looking at what needs to get done and getting to work. Here are some of the ways I try to do this.

Reducing Noise

Checking Email

Email is the one of the worst offenders for delivering noise to signal. When I need to focus, I try to turn off email for the greater part of the day. I check 2-3 times a day, e.g. 10AM, 1PM, 4PM. I use an app on the Mac called Alarm Clock Pro that reminds me to check email at those intervals every weekday. I try not to look at email in between. I got the interval email reading idea from Caterina Fake, who captured a whiteboard of a single tasking strategy that apparently someone must be using at Hunch.

Mozilla Labs is also working on a project called Raindrop, led the by the Thunderbird team, to address the issue of managing email and the countless notifications we get. Some of the ideas in their first design iteration look interesting if they can keep the experience simple. I just don't want another feed I have to watch if it doesn't boost signal to noise.

Unsubscribing

I've lost control of email, largely because of newsletters, email lists, and commercial advertisements. I used to be good at filtering out the noise, but somehow I got lazy and didn't continue to keep the noise out of the inbox. What I do when that happens is send those newsletters to folders via filters and check them on a periodical schedule if I must. Better yet, I unsubscribe to the ones I really don't read anymore but still receive. If they're good lists, they'll have an archive you can search when you need to. IXDA's email list is an example that does the web archive exceptionally well.

Dealing with RSS

I've left and returned to my feed readers so many times, saying I couldn't deal with reading everyone anymore. But when I started blogging again, I realized that I wanted to find a way to manage my feeds. I've tried using Email systems that digest daily all the most important feeds that I can't do without. I've tried using folders to filter my feed reader. I've tried watching the stream through a Friend Feed app. Every one of those just seemed to do nothing to turn down the stream and only let the interesting things through. What I do now is use a combination of services, and use the appropriate one for the amount of time I have available to read.

Tabbloid is a service I use for a handful of tech industry rags that post too often. I want to skim them daily so I use Tabbloid to give me a daily email digest of posts. I send it to trash after I skim the titles if there's nothing of interest.

Google Reader's Explore Popular items is useful for surfacing the most popular entries in your feeds. You seed the reader brain by telling it what items you liked (by clicking smiley icons) and it uses this information to help recommend items to you in the future. The Sort By Magic feed setting is another feature that surfaces items that may be of interest to you, based on what you've read and shared in the past.

I've also been using Shaun Inman's Feed a Fever app, which surfaces the most linked to entries from your subscriptions and shows you a listing of all of the posts pointing to the original item. It has the other category filtering mechanisms you'd expect, but the Hot view is where I spend most of my time. The design is also very light and very easy on the eyes, which I can't say really for the Google Reader unless I use Helvetireader.

Setting IM status

I leave IM on, but use status messages for focus time. For example, I set to busy when busy. Duh. If I set status to available and I'm trying to get things done, I don't always respond immediately unless the IM is from a co-worker.

Turn off Twitter

I have to treat Twitter like email on focus days. I check only replies and DMs a couple times a day. Twitter can be a rathole that leads you down a trail of links that will suck your time dry if you let it. It's also full of great finds and useful information, but during focus time, it's just another hose to turn down.

Focusing

Setting priorities

For me this is the set of near and far set of targets. For some projects I create roadmaps. They can have 1 year and 5 year goals. For product development, I lean on the product roadmap, and I break those down into goals which can be plotted annually, quarterly, monthly, daily. But that exercise is kind of academic with so many factors and people involved—it's a moving target. Goals on the design projects I own are easier to plot. But the general idea is to get the far out goals down, then work backwards listing all the steps that need to happen for the goal to be reached.

I know tons of books talk about how you do this, but for me it's just easy to do for a single project, up to a point. If you're good at this kind of thing, then it just means using some methodology, like David Allen's GTD to record it all and order it.

Using tickler folders

I'm a fan of David Allen, who created the productivity system "Getting Things Done," although I follow his system somewhat loosely using a combination of OmniFocus and notepads. The main idea that works for me is setting up tickler folders for recording the tasks/actions that need to be done and reminding myself of what needs attention. Works with simple paper files to record and a system of tickler folders to hold the ordered files, as Allen demonstrates in this video.

Asking your computer to nag

Making note of the time is one of those simple things I started to do to create a sense of awareness and urgency. I'm one of those people who tend to get lost in an activity and lose track of time; so much so that the day gets away and I wonder how mindful I've been while I was bobbing along. I use the Date/Time system preferences to announce the hour. It alerts me to how much time is passing away. Some people would find this annoying, I'm sure, but it actually keeps me in a state of constant, subtle panic. It's kind of like having a productivity pace maker.

Using single app mode

This is perhaps one of those things that writers do all the time, and I've only recently started using it when I'm writing. Option-Command-clicking an app in the dock opens it in single window mode, hiding other apps. This kind of happens automatically for me when I'm in Adobe tools in full screen mode, but in other tools that use floating palettes, it's easy for background applications to distract.

Getting out

That is to say, I try step away from the computer when I can. I am a remote guy on my team. I used to have an office, but now I work from home. Working from home can be kind of tough, so I try to get out a few times a week to work around others, and to have lunch or coffee with other designers in the NYC area.

When I have to focus, especially when I have to work out designs, I go out and sketch on paper in a cafe. I bring my computer usually, but sometimes it helps to go out without one and sketch somewhere different, where where I'll feel free from the constant bing of alerts. If people need to reach me they have my cell phone number, and I'm never far away from my office at home.

Sometimes it actually works

These are most of the things I can think of that I do. Sometimes it helps me focus, which is really good, because I have a hard time not getting distracted. The irony of this article is that because of it, I've whiled away an hour or so writing this when I could have been productive. What do you do to find focus?

WebMynd Header and Footer

jibbajabba — Tue, 27 Oct 2009 21:44:22 +0000

The Webmynd site features some clever scrolling behaviors, slowly spinning the "easier, beautiful..." text and fading out the header and footer as you reach the edges of the page.

Screen Name:

webmynd

Number of screens:

URL:

http://webmynd.com/html/

Video Embed Code:

http://webmynd.com/html/

BUBBLEWOOD Navigation

jibbajabba — Tue, 27 Oct 2009 21:36:54 +0000

Interesting bubble/cloud of links make up the front page of this retail site.

Screen Name:

bubblewood

Number of screens:

URL:

http://www.bubblewood.com/index_fr.htm

Video Embed Code:

http://www.bubblewood.com/index_fr.htm

Handmade 5.25" Floppy Disk Sketchbooks Now in the Store

jibbajabba — Mon, 26 Oct 2009 22:28:52 +0000

This one is for the retro computing kids—a 5.25" floppy disk sketchbook that's sure to turn heads. It's a hand-made, wirebound 5.25 inch square sketchbook with about 140-150 pages (70-75 sheets) of 70 pound white vellum paper printed with 1cm grids in warm gray ink. The cover is made from a 5.25 inch floppy disk, and inside you'll find a floppy disk pocket, and a disk label and write-protection sticker.

Pictures and more info on the product page.

5.25" Floppy Disk Sketchbook

jibbajabba — Mon, 26 Oct 2009 22:06:11 +0000

Image

Scrollbar Contents (aka Visual Page Contents)

jibbajabba — Mon, 26 Oct 2009 12:59:59 +0000

Scrollbar Contents is a jQuery plugin created by Thomas Hooper to create a scrollbar that represents post/comment volume visually.

Interaction 10 Registration Open

jibbajabba — Sun, 25 Oct 2009 14:35:14 +0000

Registration for Interaction 10 is open. Early bird pricing ends November 30th. Interaction 10 is held at SCAD, Savannah College of Art and Design on Feb 4-7, 2010 in Savannah, Georgia. Keynote speakers are Paola Antonelli, Bill Moggridge, Nathan Shedroff, Ezio Manzini, Jon Kolko, Dan Hill.

The Drop Shadow Talks, Berlin

jibbajabba — Fri, 23 Oct 2009 21:16:55 +0000

This is interesting. This season, Berliner Technische Kunsthochschule Hochschule für Gestaltung (FH) is putting on a series of lectures in Berlin centering on topics related to the drop shadow and 3D visual elements in graphic design.

The Drop Shadow Talks reply to current developments on the visually enriched layer for machine interaction. In the shades of evening lectures the Drop Shadow Talks will present art and projects inﬂuenced and inspired by the baroque graphical user interface.

Bonterra Trattoria

pennywisdom — Thu, 22 Oct 2009 23:28:03 +0000

Mediumrare just launched the redesign of a Calgary Restaurant called Bonterra. Check out the food gallery for pure awesomeness.

http://bonterra.ca

The 10% Myth and How to Put Your Creative Process on Autopilot

jibbajabba — Thu, 22 Oct 2009 18:13:56 +0000

What if we could eliminate noise and give our brains space to do harder work or process different things?

The Costanza Principle

There's a particularly funny episode of Seinfeld titled "The Abstinence," where George abstains from sex because his girlfriend has Mono, and strange things begin to happen to the serial underachiever. He appears to utilize more of his brain and becomes mentally sharp. He remembers where he left things years ago. He starts to read and understands math. He becomes more intelligent. Of course he ruined it all in a weak moment with a comely waitress.

That comedy sketch summarizes a simple and persistent myth that has stuck for years—that we use only 10% of our brain. That number may have more to do with 10 percent of our potential or capacity rather than 10% of brain use. But the idea sticks, I think, because of that hopeful notion of doing more than one thinks she is capable.

I thought of the Seinfeld sketch while I was reading Barry Schwartz's The Paradox of Choice and it put me on a separate train of thought about creativity and productivity. What if we could take the idea of eliminating noise in order to give our brains space to focus, to do harder work, or to process different things?

Schwartz says that in effect we do this every day when we go into autopilot to take care of our morning routines—bathing, shaving, brushing, etc—because we don't need or want to waste time and effort considering choices all the time. So it started me wondering how this idea translates to the work I do.

The are two ways I thought this idea could have some benefit for me: first as a tool for freeing my mind in everyday creative activity, and second, as a tool for users of the things I design not to feel overwhelmed with choice and decision making.

So I started listing how I might make this idea work in each of those contexts. For now, I'm going to focus on how this relates to my creative process, and what I try to do that now seems related to this idea.

Processes

If I learn and use a technique or process, I write about it and when necessary turn it into a set of tools that support the process. I record the steps in the system for re-doing without having to re-learn. I modify what I learn and borrow from others when what I've gleaned limits my ability to get things done.

I've done this over and over with all of the information architecture and interaction design practices that I employ. I just stand on the shoulders of those who pioneer and test these processes, making use of what makes sense, and discarding aspects as needed. This is one of the aspects of agencies that I think is really great. Processes are so well defined for those inside and outside the agency to understand that it becomes part of the common language of the team.

Tool Sets

I find toolsets and frameworks for nearly everything I do, or I create them when I can't find them. They add rigor to my process, and allow me to re-use without thought. I break out of the frameworks as necessary, but start with a sense of the complete framework, even if only in concept, and expand to satisfy my use cases and needs.

One of the things I learned early in my career from Perl programmers I worked with is that code libraries help you to be lazy. Laziness can be a virtue if it means you don't want to sweat the routine and small things so you can focus on the bigger ideas. Designers also do this with design pattern libraries and component libraries. I don't limit myself to only what libraries provide, but I do exploit them when they're useful and save me time and effort.

So what does this buy you?

I think to sum up, this all comes back to the idea of freeing your mind from the tyranny of small decisions, so you can focus on the bigger, more intellectual or creative ones. A lot of this isn't exactly auto-pilot, or may not feel that way in the beginning. But after years of developing and evolving these things, I feel some of the routines or toolsets I've created have become a part of my vocabulary. The only problem is maybe that other things compete for the open space I create. I have more to say about that, and the issue of focus, but will leave that to another entry.

I'll end as I often do with a question. What kinds of things are you doing to put your work life on autopilot?

hitotoki

jibbajabba — Wed, 21 Oct 2009 16:45:01 +0000

Hitotoki is a literary project collecting stories tied to geographic locations. Nice hand drawn details and minimalist sensibility. Uses the connection to locales using Google Maps to navigate the story spaces on the home page.

http://hitotoki.org/

Wasabi - Unique powder adventures. Worldwide

peterusborne — Wed, 21 Oct 2009 15:01:18 +0000

The pre-launch website for Wasabi Travel - who are due to launch their winter sports webapp in late 2009.

http://www.wasabitravel.com/

UX Exchange

jibbajabba — Tue, 20 Oct 2009 18:45:12 +0000

UX Exchange is a Q&A site for user experience professionals, modeled after the programming Q&A site Stack Overflow. Users post questions, reply with answers and vote questions and answers up and down.

Design GalleRIA

jibbajabba — Tue, 20 Oct 2009 17:19:34 +0000

Theresa Neil has started a Tumblog design gallery and showcase of Rich Internet Applications.