One of the coolest things I’ve seen so far is that all of the tutorials are managed by MediaWiki and are completely globally editable! No more out-datedness!

Nice work. Hoping to see some great content here soon.

• Getting Creative with Web transparency - rounds up some good cross-browser PNG transparency techniques
• 60 More AJAX and JavaScript Solutions for Professional Coding - I’m becoming a jQuery or custom-only guy, but there are some neat tricks here.
• eXtreme Type Terminology - Typography lingo 101
• FREE Typefaces from Ten by Twenty - Jura, Nevis, and Munro, three of the hottest free fonts I’ve seen.
• 63 Must-have Grunge fonts - because you know, you need 63…
• Take Control of Your Maps - Don’t default to Google Maps API on your next Web app :)
• 20 Rare Questions for Google Search Guru Udi Manber

• Techcrunch
• Blogherald
• Daily Blog Tips
• ProBlogging
• Somewhat Frank
• Silicon Alley Insider
• Official AOL Corporate Release

Great work Mark and Erik, and thanks, Snook for the killer jQuery implementation

Pinvoke: Icons and Pixel fonts

Small band of rebels versus the unfeeling evil empire :)

A good motivational, conceptual overview of Accessibility. Not much by way of example or technique, but still good. Check out my notes below.

“I don’t think the Empire had Wookies in mind when they build her, Chewie.”

• People in the rebel alliance are all shapes and sizes, imperial storm troopers are all identical.
• Uniformity vs. diversity.

Jar Jar Binks

• Seemed like a good idea at the time. If we were going to do it again, we wouldn’t include Jar Jar
• tabindex. seems like a good idea but you have to do it really really well or you will create more problems than you solve.

Luke and Leia

• Seems to imply something at the time, but as son as we find out more information, doesn’t make as much sense.

Star Wars Holiday Special

• What happens if Wookies work well? MORE WOOKIES! Right??

Early movie concepts

• Early concepts, pretty weak, and odd.
• Iterations are very important to make sure we are putting out a “right” product and won’t be putting out confusing products

Digital Enhancements

• Technology was added over time so more could be done.
• Some scenes (storm troopers in the desert) they enhanced the product, but did not change the content. Done well.
• Cantina scene however, Greedo shoots first. BOOO. Didn’t just change the presentation, they changed the content.

Luke dressed as storm trooper

• Luke doesn’t fit the uniform look of a storm trooper
• No matter what something looks like, it’s what’s under the costume (HTML) that actually matters.

These aren’t the droids you’re looking for….

• Luke’s first experience with the jedi mind trick, and it doesn’t make sense to him.
• Power of suggestion used to make people who are looking for one thing think they are getting what they are looking for, but are given something else.

“Good against remotes is one thing, good against the living is another”

• At the end of the day it’s about the people, not the screen readers!

The Death Star

• Technical marvel! Unheard of in history
• Wide open to a small scale attacks from a very small group of people.
• Sites that are revolutionary and technical marvels are often fatally flawed for accessibility.

Yoda’s Last Words to Luke

• Accessibility people often feel like the last Jedi.
• We have to pass on what we learn.
• We have to use what we’ve learned on a new project on the next one and to pass it on to other “Jedi”.

Try not, do or do not, there is no try

• “Always with you it cannot be done.”
• No difference between the stones and the x-wing
• We can’t say that this is too big of a project, we just have to believe we can do it!

“I don’t believe it!” “That is why you fail.”

• Never give up!
• We need to help make believers out of other people.

• Corey Chandler Lead Interaction Designer, eBay Inc
• Jake Cressman Producer, Electronic Arts
• Chris Maliwat Sr Dir of Prod Mgmt, Vuze Inc
• Micah Alpern Design Dir Social Search, Yahoo! Inc
• Elliot Shmukler Principal Prod Mgr, LinkedIn

Very valuable panel on testing design changes to determine their business outcome before unleashing it on the public at large. Check out my notes below.

What is A/B testing?

• Divert small amounts of traffic to different versions of site design to get metrics on what works.

Is it the job of Interaction Designers to predict the outcome of our designs?

• Shmukler: it’s our job, but is an impossible one. Impossible to predict even with significant expertise in your domain area.
• Maliwat: You can predict, but you can’t know with what degree of resolution you are correct. Testing can verify and validate the decision / opinion
• Alpern: It is our job and is important, but we need to set up heuristics to verify what works and why.

> Netflix: “Predictions color our thinking. We need to test.”

• Maliwat: but that’s not to say they didn’t make choices and predictions.
• Shmulker: you can’t test every choice you make on a page, but testing gives you a way to refine.
• Cressman: every designer brings a toolbox of heuristics to a design. where do they come from and how are they validated is the question. seems they are just passed down from book to book and blog to blog. testing gives us a way to validate our heuristics.

> Article: Design choices can cripple a web site. “None of us know what the BEST page design or copy is until we test. It is time to put away the design/copy expertise of gurus and test.” Concept: there are NO real experts. Levels the playing field.

• Maliwat: you can’t crowdsource a design. at least, the application of that is minimal. iPod would not have been designed by a crowd. Contributions of A/B testing are to help optimize, but not to revolutionize. e.g. “Are two buttons better than one. Is red better than orange.”
• Cressman: sometimes the absurd ideas are effective… but you won’t find that out until you test.
• Alpern: A novice might use testing as their north star, but won’t solve fundamental underlying problems.
• Shmuckler: you don’t have the resources to test every possible option under the sun. You will always have to make choices. Expertise will always be required for starting. Small design changes won’t show you any difference in testing numbers. Changes have to be fairly major for A/B testing to actually show you if it is better or worse.
• Chandler: Small changes CAN affect major differences. Leading can make all the difference between something showing up above the fold vs. below the fold.

> Brian Eisenberg - Clickz Networks. How to decrease sales by 90%. > “You should focus on one change at a time. See if it affects a change. Then make another change.”

• Chandler: There is a lot of overhead on testing. How to keep the big picture in mind? Is it worth doing the testing.
• Shmukler: If the risk is high, extensive testing should be done.
• Maliwat: Testing sounds dull doesn’t it? It doesn’t feel very creative. You have to balance incremental steps towards a solution with keeping the bigger picture in mind. If you are JUST doing incremental changes and not looking towards a larger vision, you are not effecting a very large change.
• Alpern: You have to be willing to take risks and push the envelope and take larger leaps than just small incremental changes.

> Jakob Neilsen: “A/B can only be done if there is one clear, measurable action.”

Chandler: There are things beyond what you are measuring (number of clicks, conversions, etc) that are important. There is a larger issue at play of people enjoying the experience, will they recommend this to their friends? How much attention to the quantitative vs. Qualitative elements?

• Shmukler: You always have to pay attention to the quantitative. There is ALWAYS a goal.

When is it worth it to compromise a core metric to improve customer experience?

E.G: sacrificing 25% revenue to build towards a larger vision.

• Shmuker: So define the larger vision as the metric you are measuring!
• Alpern: The longer term goals are harder to measure vs. instantaneous metrics (PVs, etc). If you are obsessed with the short term metric, your user experience can become perverted.

How might the role of designers change in the future as a result of this kind of measuring.

• Maliwat: testing shifts our responsibility, as our decisions require more validation. Ultimately this will be good for design. It’s good to test and prove before releasing something to a billion page views. But it’s making us feel less important. It doesn’t feel creative.
• Alpern: It’s exciting that the barriers to prototyping and creating products are becoming smaller. We can develop and share test examples with an appropriate sized focus group and that is empowering.

Chandler: How do we decide what level of quality needs to go out for the tests?

(E.G. Seeing if citrus fruits affect scurvy in sailors. Feeling bad for the sailors who didn’t get the citrus…) Are we willing to harm the experience of users for a period of time in order to test a possibility. Where is the threshold?

• Maliwat: When death is not involved, the thresholds are different. :) It’s okay to be radical.
• Alpern: If companies don’t treat their customers with respect, they will lose.
• Shmukler: Bad experience is acceptable for a short period of time
• Chandler: Sometimes you need an acclimation period though! How long are do we wait before we freak out about bad results of a test?

QA Session

** Q: What do you think about sales funnels. Isolated environments for an interaction. (this is a specific UI design question) **

• Alpern: it’s pretty common in registration, etc. The question is “when do you enter it.” Should never be a barrier to exploration. You should always allow a clear path back out. Isolated environments are usually a good thing. Also have to be careful to decide which metric you want to keep in mind because they might be in conflict! (completion rate vs. sales)

** Q: What is your relationship with in-house analysts? **

• Maliwat: I am those other people :). In general you have to be in agreement about what is important, and how to measure what is important.
• Shmukler: many times in-house analysts have an expertise on how to read the metrics and are less emotionally attached to the design and so could point out things you are blind to.
• Chandler: That interaction between the two groups is important. We provide each other insight. Designers can help to interpret the results better than analysts can. Analysts can provide better data than designers can.

Anyone who has been paying attention has already heard the news about the shift in Google’s algorithm that seems to be penalizing sites for massive cross linking. This is especially relevant to myself as my job is as Lead designer for one of these networks. So, here’s the roundup of everyone who is writing about it.

1. TechCrunch - Google Declares Jihad On Blog Link Farms (Where I first heard the news from Gavin)
2. Silicon Alley Insider - Google’s PageRank Shuffle: Big Sites Say Bye-bye, Traffic?
3. Search Engine Journal - Google Drops PageRank For Many Sites : Paid Links or New Algorithm?
4. Mathew Ingram - Google uses the PageRank hammer
5. Google PageRank Penalties For Network Blogs
6. Andy Beard - Digg Favorites Slapped By Google (IMO, the best analysis)

They all say the same thing and reference each other. (Hmm… wonder if they will take a PR hit?)

From Andy Beard:

Many of the reputable sources that have received a penalty are part of extensive blog networks, and they have one factor in common. They have massive interlinking between their network sites.

That was my analysis as well, just judging from our own internal methods of doing things. This has consumed a large part of my day with phone meetings and e-mails flying around trying to figure out how to rectify the problem. But I probably can’t talk about that yet.

As Mike said: It was Fun While It Lasted

I probably should rel="nofollow" those links, just to be safe…

Note about my recommendations.

• I’m very interested in Christian Theology
• ESV is my favorite bible translation
• I have no idea why they are recommending Casting Crowns to me.
• I love Harry Potter

Enjoy.

Highlights so far:

• Lunch with Jeremy Keith
• Talking to Derek Featherstone during a break.
• Dinner with some good friends at Buca di Beppo
• Sushi at OYSY
• Meyer’s Dragon Style, Cederholm’s Tiger Style, Keith’s Crame Style, Featherstone’s Iron Style
• The fact that Nancy and Elena were there with me.

Biggest Take-home of the conference

There is so much that we can do with the technologies we have at hand when they are used in the correct manner. We need to challenge ourselves to think out of the box of conventional marking up of straight text documents (though that is still important too). Never simply say “it cannot be done”.

And check out some photos from the event.

Eric Meyer: Secrets of the CSS Jedi

Gist: You can do a whole lot of really cool things with CSS if you think about it.

Through his presentation, he turned a simple, semantic html table into a beautiful graph/chart using nothing but CSS. Pretty amazing.

Jeffery Zeldman: Writing the User Interface

Gist: “Get a writing budget and hire a copy Czar. The end. I now have 50 minutes for questions…”

Design helps people read less. When people read less, every word counts.

Copy is the easiest and often cheapest part of your site to fix!

• Guide copy must be brief
• Guide copy must be appropriate
• Audience appropriate
• Brand appropriate
• can mean not-inappropriate

Good Examples:

• Joyent.com
• Flickr.com
• Blogger.com

“Copy” copy: Some of the rules about brevity and clarity are relaxed Brand copy: Brief and clear. Brand appropriate

• leukemia letters - My experiences with leukemia, blindness, and life in general
• a list apart - for people who make Websites
• Steve Krug - Web usability consulting

How words work online

• reading online can be more fatiguing than reading print (true? studies on both sides of the fence)
• use frequent subheads
• chunk text
• 8th grade vocab
• short, declarative statements

Articles on copy writing:

• Attack of the Zombie Copy
• Your About Page is a Robot

Jason Santa Maria: Designing Your Way Out Of A Paper Bag

Jason’s talks are hard to take technical notes on, and don’t have a lot of clear take away points, but there are a few things I can mention.

I’ll also mention that I always come away inspired creatively. He highlights several ways that he does research and keeps himself thinking freshly. Very good.

Three phases of the design process:

1. Discovery: work in an inspiring environment. keep a sketchbook. sketch regularly
2. Research: Spend some time with your clients, look for analogous media forms (ie, print, illustration)
3. Process - this was the biggest hook for me…

Especially, concept of a new phase of design that comes after wireframing and before graphics creation called a “gray page”. It is basically a detailed page comp, minus colors and typography and imagery used to make sure layout and visual hierarchy are in-line before graphics creation commences. Great stuff, I’ll have to use it.

The rest of the presentation:

• A word on branding
• A bit on layout
• An rant interlude about typography

Lou Rosenfeld: Search Analytics for Fun and Profit

Querying Your Queries

1. What are the most frequent unique queries
2. Are frequent queries retrieving quality results?
3. Click-through rates per frequent query?
4. Most frequently clicked result per query?
5. Which frequent queries retrieve zero results?
6. What are the referrer pages for frequent queries?
7. Which queries retrieve popular documents?
8. What interesting patterns emerge in general?

User Research: What do people actually want from us?

Analytics provide a true expression of users’ information needs.

• What else do they want? What groups of things are they searching for in the same session?
• Who wants it?
• When do they want it?

Content Development: Do we have the right content?

For searches that return zero queries:

• does the content exist?
• If so, is titling, meta data, or indexing problematic?
• If not, why not?

Search Entry Interface Design:

• Use the box? Or something else…
• Which results go where? (#10 clicked through more often than 6,7,8,9… )

Metadata Development: How do users express their needs

• Searching “cancer” vs. “oncology”, “lorry” vs. “truck”
• Search syntax (Boolean, natural language, keywords…)
• Length of queries

Problems:

• Lack of time
• Few useful tools for parsing logs…
• ignorance of the method
• hard work / boredom of doing analysis

Forthcoming book: Search analytics for your site

Liz Danzico

Myth 1: Navigation must be consistent Navigation must always be predictable and familiar.

Myth 2: There is a magic number 7 (plus or minus 2) There is a magic number, but it always “just depends”

Myth 3: Users must be able to get to all parts of the site all the time Users must get to everywhere from everywhere, but this includes all the tools available to the user outside the context of the site.

Myth 4: Users must know where they are on the site at all times. Users must know what’s next.

Myth 5: The user experience must be seamless. The designer must design beautiful seems.

Myth 6: Shorter is better. (Fewer clicks are better…) Short is better. And sometimes long is better too.

Myth 7: Information architects do information architecture. …and so should developers, designers, writers, clients, and users.

Dan Cederholm: Interface Design Juggling

To be honest, I had a hard time taking notes on this one, and instead sat in awe for most of the presentation. It was refreshing to watch the master work. I had to review the slides to come up with notes for this one :)

When learning to juggle, you start by getting good at passing one ball back and forth between hands, then two, then three, etc. The analogy between this and learning to be an interface designer is a bit obvious. You become good at one skill, then another, then another, and learning how to “keep them all in consistently in the air while adapting to shift and changes in pattern” is the art of Interface Design Juggling. Clever.

His presentation came in five parts:

1. Color

Start with a small core pallet and reuse that throughout the design. This brings unity to the design.

Link color carries a lot of weight in the design.

He showed a few inspirational design tricks with color that will probably change the way I work :)

2. Typogrpahy

Great typography is invisible. Typography doesn’t win you a spot on CSSBeauty, does it?

It’s not about the type faces, it’s about the typography. The distinction is important. Renaissance typographers had one font to work with, and yet produced beautiful typographic art.

3. Iconography

Favicons: the most important design element of any site. Seriously :)

Add detail without adding complexity

This part didn’t really fit into his original preview. But was a great help. Basically, check out tupeepal.com (a dummy site he made for the presentation) and Verle’s Blog

4. Microformats

Microformats are, in fact:

• confusing
• a waste of time
• something that geeks do with a lot of time on their hands
• but are totally worth using.

There are a lot of sweet, nearly accidental things that can be done by utilizing microformats. Sort of an “accidental API” for your site :)

5. Flexibility (which he didn’t actually cover, bummer)

See Bulletproof Web Design

jeremy keith: Be Pure, Be Vigilant, Behave

Be Pure

Separation of content, structure, and behavior

1. Start with Content
2. Then add structure
3. Then add presentation
4. Then, AND ONLY THEN, add behavior

Comparing CSS and DOM

CSS: p{ }

DOM: document.getElementsByTagName("p")

LOLcat: I can haz p tag nao plz? kthxbai

CSS #foo{ }

DOM: document.getElementByID("foo")

CSS: #foo p{ }

DOM document.getEleemtnById("foo").getElementsByTagName("p")

Be Vigilant

<p style="..."> - you avoid this when you can, right?

In the same way, keep script out of your html when possible

DON’T EVER DO THIS: <a href=”javascript:…”>

<a href="#" onclick="..."> this is just like an inline style.

Always think first: “What is this semantically”. Do not think about behavior first.

Recycle existing content, don’t create new content. (i.e., replace <option> with <li>)

Behave

Ajax = communicating with the server without refreshing the whole page. Using xmlhttprequest

There is no reason that you can’t use the same idea of progressive enhancement when using AJAX.

Hijax

If you want to build an Ajax Web site, first build a non-ajax Web site.

Use xmlhttprequest like a dumb waiter. Use javascript to intercept a normally functioning html page (i.e., form actions, links, etc). Don’t use javascript to do the heavy lifting, do that on the server.

Important considerations User needs:

• what’s happening?
• what happened?
• bookmarking
• The back button

luke wroblewski: best practices for form design

What defines a good form?

• Minimize the pain
• No one likes filling in forms
• Smart defaults, inline validation, forgiving inputs
• Illuminate a path to completion
• Consider the content
• Familiar vs. foreign
• Frequently used vs. rarely used
• Ensure consistent communication
• errors, help, success
• single voice despite many stakeholders

Most forms are an artifact of the information in a database. Like a one way conversation.

Considerations in form design

1. Information

• Layout
• Label positioning
• content groupings
• Inputs
• formats, required fields
• Actions
• Help and tips
• Visual Hierarchy

Top aligned labels.

• Best when when data being collected is familiar
• Better flexibility

Right-aligned labels

• Clearer association between label and field
• more difficult to scan
• Fast completion times

Left-aligned labels

• Best when the data you are requiring is unfamiliar
• enables label scanning
• less clear association between label and field
• more difficult to change label

Required form fields

• Indicating required fields are most useful when there are a lot of fields, few required fields
• Indicating optional fields is more useful when there are few optional fields
• Neither is useful when all fields are required :)
• TRY TO AVOID OPTIONAL FIELDS
• Getting rid of stuff on your form increases engagement with that form.

Field lengths

• Field lengths can communicate the type of date required by a user. Helps them to think less.

Content Grouping

• A way to scan information at a high level
• A sense of how information is organized
• Use relevant groupings
• Use minimum amount of visual elements necessary to communicate useful relationships

Actions

• Not all form actions are equal, make primary action button different from secondary actions… visual presentation should match their importance
• Avoid secondary actions when possible

Help and Tips

• useful when asking for unfamiliar data, users may question why data is being requested, if there are recommended ways of providing data
• if every single field in the form has help text, something is wrong with your forms.
• minimize the amount of help required to fill out a form

Interaction: Path to completion - primary goal of a form is completion. Minimize obstacles to completion

• remove all unnecessary data requests
• enable flexible data input
• smart defaults
• for long forms, show progress and allow saving

Interaction: Tabbing

• consider tab order
• consider tabbing expectations

Progressive disclosure

• not all users require all options all the time
• expose options as they become necessary

Feedback:

• Inline validation, suggest valid inputs or validate input, help users stay within the limits of the form
• username checking
• password strength
• valid postal codes
• Errors, provide clear resolution in as few steps as possible

Progress

• provide feedback when action is in progress so users know something is happening.
• disable submit button after user submits to avoid duplicate submissions

Success

• confirm data input in context
• provide feedback via message or other indicator

Derek Featherstone: Accessibility: Lost in Translation

I was late for this session as I was busy hauling our luggage down to the car so we could make a timely getaway and be home before Elena’s bedtime so as not to destroy her schedule completely (and thus make life miserable for the wife and I).

All I can say is that he created an accessible crossword puzzle using nothing but a valid XHTML form, CSS, and DOM Scripting. It was frickin sweet. Take that, accessibility nay-sayers.

And That’s All I Saw

After Derek’s awesome presentation, I high-tailed it out of there to meet up with my wife and daughter.

Then we went out for sushi. Awesome. What a great time.