Beautiful Design

Notes: PowerPoint is not presentation

2008-07-05T08:36:00.001-05:00

From a presentation by Nancy Duarte.

[http://www.vizthink.com/blog/2008/06/18/webinar-creating-powerful-presentations-with-nancy-duarte/]

Telling stories in pictures

Thinking visually
Simplicity
Clarity

Start with open space/empty whiteboard

Perfection achieved when nothing left to take away... not nothing left to add

Presentations as a platform
Mediums
    projector
    paper
    web
    devices
      interactive
      view
      collab

Need a visual language for your business
specific artwork
really resonates with your business

Zoomii.ca

2008-06-27T09:03:00.001-05:00

Here's a very neat take on browsing the bookshelves of an online bookstore. The interactions are surprisingly intuitive and very responsive-I actually had fun perusing the fantasy section. When was the last time I perused the catalog of an online store? Let me tell you... it's never happened! I'm either searching for something specific or have been given a direct link. Here's their new releases section:

Clicking on a title brings up what you'd expect... detailed product info. direct from Amazon's ginormous book database:

Way to go guys!!

Internet Retailer Conference 2008

2008-06-17T20:18:00.001-05:00

"Get Elastic Ecommerce Blog" is quickly becoming one of my fave blogs. (http://www.getelastic.com)

They were down in Chicago last week for the Internet Retailer Conference and have posted a few of the vendor interviews they managed to squeeze in between sessions. :-)

I found Berdine Wu's common-sense advice particularly enlightening. She talked about some of the things any company going online needs to get right to be successful...

Search engine optimization/marketing
User experience of your website (smooth, few clicks to buy)
Clear, crisp imagery
Directed email campaigns
Branding coming across strongly

Nice.

Notes: Google I/O State of Ajax

2008-06-15T09:24:00.001-05:00

User Experience

Book: Jeff Raskin: The Humane Interface

2 parts:
Visual design
Interaction design

User experience expectations have changed dramatically for the web

Google Gears->Gears

Gears Demo 1:
A neat demo was shown with gears being used as a background
    processing thread
Common pattern for doing long running tasks
    Spawn a background thread keeps the UI responsive
    Can't really do that in the browser
    Complex Javascript fights repainting... both share same thread
    Gears can do this though!!

Gears Demo 2:
Form History pattern
    like Time Machine
    Replacement for undo
    Can go back in time to different states of form
    Trying to implement undo is hard (instead of warning dialogs)
      The browser has its own undo stack
      2 dueling undo stacks? -> Confusion

Gears is really amping up responsiveness!

Gears Demo 3:
Demo-ed a growls like widget for web applications

Unobtrusive Javascript:
An application that degrades gracefully in environments where
javascript/ajax might not be available
Progressive enhancement
Does your application still work?

Firebug Rocks!!

2008-06-15T07:59:00.001-05:00

I was trying to figure out how the site logo at http://www.macsbeer.com/index.php was done so I right clicked it and hit "Inpect Element". (FF3+Firebug1.2.0b3)

Here's what I got from firebug...

In the style window on the right I quickly found the background image responsible for the nice logo but look what happened when I mouse-d over it!

Fantastic.

The Dreyfus Model of Learning (Applied to Medicine)

2008-06-07T08:23:00.001-05:00

Each and every skill we possess falls into one of the following 5 categories of proficiency...

(1) In the novice stage, the freshman medical student begins to learn the process of taking a history and memorizes the elements, chief complaint, history of the present illness, review of systems, and family and social history.

(2) In the advanced beginner stage, the junior medical student begins to see aspects of common situations, such as those facing hospitalized patients (admission, rounds, discharge) that cannot be defined objectively apart from concrete situations and can only be learned through experience. Maxims emerge from that experience to guide the learner.

(3) In the competent stage, the resident physician learns to plan the approach to each patient’s situation. Risks are involved, but supervisory practices are put in place to protect the patient. Because the resident has planned the care, the consequences of the plan are knowable to the resident and offer the resident an opportunity to learn.

(4) In the proficient stage, the specialist physician early in practice struggles with developing routines that can streamline the approach to the patient. Managing the multiple distracting stimuli in a thoughtful way is intellectually and emotionally absorbing.

(5) In the expert stage, the mid-career physician has learned to recognize patterns of discrete clues and to move quickly, using what he or she might call "intuition" to do the work. The physician is attuned to distortions in patterns or to slow down when things "don’t fit" the expected pattern.

On Craftsmen and Novices...

2008-06-07T08:17:00.001-05:00

Here's an excerpt taken from 'A Pattern Language' by Christopher Alexander written more than 30 years ago. A craftsman brings to bear an intuition garnered from years of experience in his work. The novice prefers to follow rules and be told what do to. The craftsman uses abstract concepts and considers context. In the fantastic quote I've included below, Christopher describes the craftsman as being unconcerned with small mis-steps here and there - he knows he can fix them later...

Why does the principle of gradual stiffening seem so sensible as a process of building?

To begin with, such a structure allows the actual building process to be a creative act. It allows the building to be built up gradually. Members can be moved around before they are firmly in place. All those detailed design decisions which can never be worked out in advance on paper, can be made during the building process. And it allows you to see the space in three dimensions as a whole, each step of the way, as more material is added…

The essence of this process is very fundamental indeed. We may understand it best by comparing the work of a fifty-year-old carpenter with the work of a novice. The experienced carpenter keeps going. He doesn’t have to keep stopping, because every action he performs, is calculated in such a way that some later action can put it right to the extent that it is imperfect now. What is critical here, is the sequence of events. The carpenter never takes a step which he cannot correct later; so he can keep working, confidently, steadily.

The novice by comparison, spends a great deal of his time trying to figure out what to do. He does this essentially because he knows that an action he takes now may cause unretractable problems a little further down the line; and if he is not careful, he will find himself with a joint that requires the shortening of some crucial member – at a stage when it is too late to shorten that member. The fear of these kinds of mistakes forces him to spend hours trying to figure ahead: and it forces him to work as far as possible to exact drawings because they will guarantee that he avoids these kinds of mistakes.

The difference between the novice and the master is simply that the novice has not learnt, yet, how to do things in such a way that he can afford to make small mistakes. The master knows that the sequence of his actions will always allow him to cover his mistakes a little further down the line. It is this simple but essential knowledge which gives the work of a master carpenter its wonderful, smooth, relaxed, and almost unconcerned simplicity.

The BBC wants your feedback

2008-05-04T22:06:00.001-05:00

Making it easy for disgruntled customers to leave feedback about your product - both positive and negative - is one of the best ways we have as product managers and designers to make it better.

I just stumbled upon BBC's complaints website. (Shown above.) Visitors can learn about the broadcaster's complaints process, file complaints and look to past responses to see how theirs might be handled.

Nice.

Paging on Smugmug.com

2008-04-23T08:02:00.001-05:00

I love the way Smugmug does its paging of large photo albums...

The first page:

The second page:

Look at the nice little overlay control with all 6 pages!

and the last page:

Parsing command line args

2008-03-26T10:28:00.001-05:00

I love the way it's done in Gant!!

def cli = new CliBuilder ( usage : 'gant [option]* [target]*' , parser : new GnuParser ( ) )
cli.c ( longOpt : 'usecache' , 'Whether to cache the generated class and perform modified checks on the file before re-compilation.' )
cli.d ( longOpt : 'cachedir' , args : 1 , argName : 'cache-file' , 'The directory where to cache generated classes to.' )
cli.f ( longOpt : 'gantfile' , args : 1 , argName : 'build-file' , 'Use the named build file instead of the default, build.gant.' )
cli.h ( longOpt : 'help' , 'Print out this message.' )

cli.l ( longOpt : 'gantlib' , args : 1 , argName : 'library' , 'A directory that contains classes to be used as extra Gant modules,' )
cli.n ( longOpt : 'dry-run' , 'Do not actually action any tasks.' )
cli.p ( longOpt : 'projecthelp' , 'Print out a list of the possible targets.' )
cli.q ( longOpt : 'quiet' , 'Do not print out much when executing.' )
cli.s ( longOpt : 'silent' , 'Print out nothing when executing.' )
cli.v ( longOpt : 'verbose' , 'Print lots of extra information.' )

cli.D ( argName : 'name>=<value' , args : 1 , 'Define <name> to have value <value>.  Creates a variable named <name> for use in the scripts and a property named <name> for the Ant tasks.' )
cli.L ( longOpt : 'lib' , args : 1 , argName : 'path' , 'Add a directory to search for jars and classes.' )
cli.P ( longOpt : 'classpath' , args : 1 , argName : 'path' , 'Specify a path to search for jars and classes.' )
cli.T ( longOpt : 'targets' , 'Print out a list of the possible targets.' )
cli.V ( longOpt : 'version' , 'Print the version number and exit.' )

def options = cli.parse ( args )

parse(args) returns a map you use like so...

if ( options.h ) { cli.usage ( ) ; return 0 }
if ( options.l ) { gantLib << options.l.split ( System.properties.'path.separator' ) }
if ( options.n ) { GantState.dryRun = true }
def function =  ( options.p || options.T ) ? 'targetList' : 'dispatch'
if ( options.q ) { GantState.verbosity = GantState.QUIET }
if ( options.s ) { GantState.verbosity = GantState.SILENT }
if ( options.v ) { GantState.verbosity = GantState.VERBOSE }

PS. I'll try to clean this up later... pygments.org looks neat!

The Four Stages of Learning

2008-03-25T12:13:00.001-05:00

Unconscious incompetence

In the first stage of learning you don't know you're no good - ignorance is bliss! Sometimes this comes from simply having preconceptions about how easy a task is and sometimes it comes from not knowing there's a better way. Dysfunctional teams and developers are often unaware of what they're doing wrong, even if it becomes obvious when scrutinized.

Conscious incompetence

The second stage of learning is the tricky one as it starts to dawn that you're not actually all that good! At this stage, teams and developers need a lot of support to prevent them wallowing in despair and to help them select and adopt new techniques.

Conscious competence

In the third stage of learning you're consciously applying the techniques you need in order to be "good". Here teams and developers know what they should be doing but need their momentum to be maintained, often by external encouragement and review.

Unconscious competence

At the fourth stage of learning you're naturally doing things right.

Interview: Nathan Shedroff

2008-03-24T08:51:00.001-05:00

An interview by Kate Rutter with Nathan Shedroff about blending the roles of designer and business analyst in a new program being offered at the California College of the Arts. Brilliant...

[KR]: It seems that a common attribute of similar programs is to blur the boundaries between fields, and to foster the ability to synthesize…to cross-pollinate concepts and ideas across different functional areas. With this trend towards generalization, how do you avoid teaching people to be, for lack of a better phrase, Jack-or-Jane-of-all-trades but master of none?

[NS]: This is a great question. There’s no way we can teach students everything they need to know. We’re specifically looking for passionate individuals who will take what we learn together and apply it to the passions, interests, and experience they already possess. Their learning is life-long so the best we can do is frame some of these perspectives and skills for them, give them some experience, and inspire them to continue the process. We’ve prioritized, in the curriculum, the skills, knowledge, and experiences we think they will need the most, but it’s just a start. Besides, there’s only so much you can learn in school. At some point, you need to learn “on-the-job” — whatever that job may be. So, we’re exposing our students to a variety of skills but with unified perspectives (design-led innovation, meaningful experience, sustainability, and visionary leadership) so that their deep skills will follow these lines. They will be expert innovation leaders and will be able to apply these skills to any domain or challenge.

Bounded Irrationality or Decision Making Traps

2008-03-23T08:35:00.001-05:00

1. Anchoring

When considering a decision, our minds are unduly influenced by the first information we find. Initial impressions and data anchor subsequent judgments.

2. Confirmation

Through selective search and perception, we subconsciously seek data that supports our existing point of view, and avoid contradictory evidence.

3. Memorability

We are overly influenced by recent or dramatic events. Repetition from one or multiple sources can also influence belief, memory, and judgment.

4. Status quo

Decision makers exhibit a strong bias toward conservatism, inertia and alternatives that perpetuate the status quo. We look for reasons to do nothing.

5. Sunk cost

Unwilling, consciously or not, to admit past mistakes, we make decisions in a way that justifies past choices.

From Ambient Findability (pg. 157)

User Experience

2008-03-23T08:16:00.001-05:00

Peter Morville's definition of user experience is broader than most but I like the direction he takes it in... (His book Ambient Findability is fantastic btw.)

1. Useful

As practitioners we can't be content to paint within the lines drawn by managers. we must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful.

2. Usable

Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.

3. Desirable

Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand and other elements of emotional design.

4. Findable

We must strive to design navigable web sites and locatable objects, so users can find what they need.

5. Accesible

Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). today, it's good business and the ethical thing to do. Eventually, it will become the law. Standards-based design for accessibility also supports access via mobile devices.

6. Credible

Thanks to some ground-breaking research out of Stanford's Persuasive Technologies Lab, we're beginning to understand the design elements that influence whether users trust and believe what we tell them.

7. Valuable

Finally, it's not just about the user. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction.

From Ambient Findability (pg. 109)

Information Hierarchies

2008-03-01T00:25:00.001-05:00

It really is amazing the amount of information most people can absorb quickly if it's organized effectively. The 2 screens linked below illustrate this...

Yahoo Desktop1:

Yahoo Desktop2:

Differences between the first and second screens:

- 4 main content groupings: the search field, sidebar, main content area and tag cloud

- Data grouped to align with user goals like music, photos and documents

- Icons are used effectively to break up the different groups with the main content area

- Even fonts are used to group similar items with categories

[Proximity, shape, size and colour are all examples of some of the visual cues we'll use to group related things together.]

H&R Block's Tango

2008-02-24T02:48:00.001-05:00

H&R Block has taken their tax preparation offering in a radically new direction this year for your 2006 returns. Enter project Tango...

It runs in a browser like Firefox (shown above), but they've re-jigged the experience by getting rid of back/forward, refresh, et. al. Very slick!

Check out their making of video: "The Journey Continues...". It feels like I'm reading an interactive comic book.

[Link: http://hrblock.com/tango/thejourney.html]

User Stories

2008-02-24T01:56:00.001-05:00

Def'n: "Those that are familiar with Agile approaches to software development are also familiar with the idea of a user story being a deliverable unit of business value within the context of a system."

[Link: http://studios.thoughtworks.com/2008/2/19/forest-for-the-trees]

Best is the Enemy of Good Enough...

2007-12-09T11:31:00.002-05:00

I've written about this before, but the message is worth repeating now and then so I don't forget...

Sometimes I'll spend hours on something I'm trying to get perfect. "This block of code could be cleaner." or "Progressing through this form doesn't feel very natural now does it?" It's a trap I fall into all the time. (Thankfully I'm getting a little better at catching myself on the edge.)

That's not to say I shouldn't always be trying to do my best! I do however have to accept my best for what it is today, continue to learn from my experiences and improve.

Why do you use 3rd party libraries?

2007-11-30T00:07:00.001-05:00

I asked a co-worker why he decided to roll his own javascript remoting framework rather than use something like prototype that would do it all for him. He told me he'd looked into a few, but couldn't find one that just did remoting - they all came more than generously padded with extra cruft he didn't need. I can sympathize with his point of view, but he did get me thinking about the times I've been willing to take on the additional cognitive burden frameworks like Spring, Hibernate, Struts2, etc. add to my projects. Here's what I came up:

3rd party libraries are maintained by other people. To put another way, 3rd party libraries are not maintained by me. Which means bugs I get bug fixes for free.
They're usually the bits of my application that I consider plumbing ie. unrelated to the business problem I'm trying to solve. (eg. Spring, Hibernate) Why am I spending time on problems that don't add value to my project?
Each major revision of a library is more polished/refined than the last. Better abstractions, shifts towards external configuration by xml, shifts back to configuration in code by annotations/intelligent defaults are some of the ways libraries have evolved in recent past to make using them easier.
The very best are used by thousands of developers which makes them battle hardened aka. production ready. Odds are somebody somewhere has run up against bugs I would have otherwise hit in my project. Thanks Somebody!

That's all I've got for now. If I think of any more, I'll add them.

My new Eee pc!

2007-11-10T11:11:00.001-05:00

I have no trouble whatsoever seeing this little device becoming indispensable to me. Out of the box, it comes with more than enough software to satisfy the needs of the 80%-ile. (Internet, productivity, media management/playback and games are all well represented.) I thought the "friendly" UI Asus developed would be the first thing I turned off but there are a few things it does right that eventually sold me on it:

- The applications I use the most are maximized by default and can't be made smaller - Firefox, OpenOffice, etc. Asus specifically tailored the experiences of these applications for it's new platform and done it well.
- The little home key automatically minimizes everything instantly so you can see the dashboard. (It brings up the last application you were working in if you hit it again. Again this is instantaneous.) I use this all the time to start new applications.
- My favourite apps couldn't be easier to find. (Web browser, word processor, presentations.)

(Compare that to the advanced view: 1. Apps wouldn't maximize on their own - I found I was doing this myself all the time. 2. The home key brings up KDE's start menu. 3. Applications were harder to find buried as they are in the start menu under multiple levels of submenus I'm not familiar with coming from Windows.)

Thanks Asus!

Scott's Grails/GORM talk...

2007-10-24T22:58:00.000-05:00

Scott Davis: davisworld.org

used in grails stack
gorm: grails object/relational mapper

thin wrapper over hibernate

google: grails rails performance

[what is quartz?]

hibernate knowledge transferrable here
can override default gorm behaviour
.hbm files

can map domain classes to tables with different names
normally it's pogo name == table name

nice dsl for gorm coming in grails 1.0-rc1

grails shell lets you connect to running application and query data
using app domain objects

select * from artist
* == splat

See dynamic sorted list! awesome!
Simple dynamic queries

Relationships are pretty damn cool too
see 1-1 slide

send thx!
email: scottdavis99@yahoo.com

Scott's Advanced Grails talk...

2007-10-24T22:55:00.000-05:00

quote: make easy things easy, hard things possible

many-many relationships not easy
but possible

grails brings together lots of popular java libs/frameworks
grails uses spring mvc for views
user auth uses spring acegi

google: many to many relationship grails
managed by hand in domain class
see BookAuthor class/slide
not a bad solution

get on grails mailing list->codehaus project

grails ships with prototype, scriptaculous, yui out of the box
in view:

emits >script src=... tag into response

take a look at:
google: cos.jar
manages file upload nicely
+ others
project: "com.oreilly.servlet"

file upload is nice
uses spring under the covers

security through acegi
need to install plugin
gem-like:
grails list-plugins
grails install the_plugin
grails.org: jsecurity plugin

No Fluff wrapped up...

2007-10-24T22:00:00.000-05:00

I never did get a chance to write about my experience at No Fluff last weekend in real-time, but I've decided to put up some notes from a few of my fave sessions for posterity's sake. Scott Davis's Groovy/Grails track was by far my favourite. JSF/Seam/GWT et al were interesting to be sure, but more evolutionary IMHO. Grails on the other hand (which has, admittedly, borrowed rather generously from certain other frameworks du jour) was just neat-o!

No Fluff Just Stuff - Toronto has just rolled into town...

2007-10-19T09:30:00.001-05:00

... and I'm attending! This being my first time, I expect all the presentations will be fresh and *hopefully* exciting. I'll be sticking to the JSF, Grails and Spring 2.0 streams primarily as they seem most relevant/interesting to me, but the truth of the matter is it was really hard to choose sessions - they all look good. I'll be updating my blog throughout the day if I can - hopefully they have wifi at the hotel's conference center - otherwise expect updates in the evening.

See ya there!

Parallel Thinking

2007-08-29T19:15:00.000-05:00

Has anyone else noticed the attention a little known language - Erlang - has been getting in recent past? It just hit me... it's an attempted shift away from more megahertz will save me, towards multiple cores will save me. Programmers everywhere are trying to find a better way to model concurrent systems. Getting shared memory systems right is just plain hard. Looks like Erlang may be my language to learn this year. :-)