Highlighting exceptions allows people to quickly spot problem areas. Example slide was a bar chart full of gray bars with one very low bar that was red. Second example slide showed negative % change in red with other percentage values in black.

Key Performance Indicators (KPI)

Everything on your dashboard will be a performance indicator but not necessarily a key performance indicator. Example: Total sales: 9.1M — the value looks good. But if the percent change YoY (year over year) is -13.6% then the total sales value isn’t very good at all. Choose the right data to display.

• Avoid a lot of interactivity on dashboards.
• Use “word sized graphics” — very small charts shown inline with text data.
• Use contrast effectively to make exceptions pop visually.
• Your dashboard doesn’t have to look like a car or plane dashboard.
• Gridlines aren’t necessarily necessary.

“Pie charts are a bad idea regardless…” Really? It’s a bad idea in his example slide with 50 different items listed out. “Round visuals aren’t an effective use of real estate.” A round visual may leave some whitespace on the table but the last time I checked that wasn’t necessarily a bad thing.

“Bar charts are fine but…” He’s showing a slide with too many bars. Lesson here is: be careful of the data set range you choose to include.

Shiny doesn’t work for data graphics and can actually cause confusion. Example slide shows a highlight on a pie chart causing one section of the pie chart to look like two sections.

It’s difficult to prototype a dashboard because you need to develop the data model to support the prototype. Suggestions for good prototyping: Focus your work on the static portions of the dashboard. Get the right layout, data, metrics, and visualizations. Vet your ideas with the programmers to ensure feasability.

There was a list of links presented at the end that I didn’t catch, but Scot Hacker did (scroll to bottom of post).

The better the design:

• The easier the reading experience
• The deeper the engagement
• The more connected the consumer
• The stronger the brand relationship

Wired commissions custom fonts for their magazine. Much of typography has been lost with the move to online. Fixing that is one of the goals of Wired.

Wired’s custom fonts have 10,000 kerning letter pairs! A typical font has 500.

Wired’s Tablet Project:

Combine the fidelity of print design with the flexibility of online design.

400 Designers and 1,100 Editors at Conde Naste, parent of Wired. They need a digital solution that can integrate into the existing design workflow. Conde Naste reaches over 60 million people a month.

Slide showing the flow of an article being built for Wired. Lots of steps in the process.

K4 is the database architecture that allows simultaneous distributed design and editing with remote tie-in.

What is the best way to navigate a digital publication? Influential factors: print magazines, iPhone, digital and web content, ergonomics of a tablet device, intuition and what they thought people would find easy to use the first time. Three design goals: allowing the content to shine, walk-up usability (instant, intuitive interface), and revolution through evolution, meaning not doing everything at once. The application will evolve over time.

Showing a slide diagraming the workflow to repurpose a print article for tablet devices.

Magazine browsing is a left-to-right linear process along a vertical axis (down). Tablet app uses the same flow.

Here it comes. The WIRED reader prototype is about to be shown with the current March issue on it.

iPad application will release first! Adobe worked with Wired to create this thing. Wondering if they used the new Flash-to-iPhone native app conversion to build iPad version? Demo is on a Dell. Ads are scrolled through just like in the print version. Advertising is still very important.

Showing some very cool interactive features. Image galleries in articles, 360 degree rotating 3D images, animated graphics, etc. These are the features that will make the tablet version of the magazine so compelling. Showing a second gallery implementation now–this one with thumbnails.

They’ve actually designed pages different for landscape and portrait orientation. On top of the magazine layout, that’s insane. Just showed a zoom in on an complex image. Ads with interactivity. They’ve built ways to layer interactivity on top of flat advertiser assets, like a photo explorer for hi-res photos, form interactions, 360 rotation for 3D images.

Showing built-in audio. Called Kevin Smith annoying.

Showing several different platforms, including several smartphones.

Audience Q&A

They won’t launch with usability features for sighted or otherwise handicapped users. They said they would add those features in the “years to come.” I’m willing to bet that will piss more than a few people off. Also doesn’t make Adobe look good since they’ve had longstanding usability issues with Flash.

They don’t yet know how the new tablet app will affect the website and what content ends up on the website. They want to reset the economics of print journalism.

They want to reach out and be wherever their readers are, including the iTunes store. This was a response to a question about giving away subscriber data to Apple. Good question. Surprised that they don’t seem to be very concerned about it at all though. I hadn’t even thought about this issue until the questioner raised it.

Psychology Cards

10 minutes late to the start of the panel — Groupon breakfast ran long with cool conversations with cool people.

He’s talking about iLike.com where, instead of getting a form to enter artists he likes, he was presented with a grid of artists (picture + title) that he could select bands he likes. At the bottom of the page he could see more artists or he could go to the homepage. Very much like Netflix.

He clicked through 10 pages of artists. The visual nature of the list piqued his curiousity.

Recognition over Recall – select bands you know rather than bands you like.

More seductive interations on iLike: they gave him the iLike challenge where they played song snippets and rewarded points like a game depending on how fast you can identify the song name.

Increasing motivation = psychology.

What do we know about people? We’re curious. We seek out patterns. We don’t like to make choices but we like choice. Mine: We see patterns even where there are none. We seek the opinions of those we trust or we rely on the wisdom of crowds. People like to talk about themselves. People like free stuff.

His stuff: we’re lazy, self-centered, like to be the hero of the story, respond to our name when it is called out, we’re afraid of change.

If we know people are curious, how can we use that?

If you salt (seed) the tip jar people are more likely to add tips. It’s an example of the social proof (similar concept to the wisdom of crowds).

Good example of social proof: the let’s fix Outlook site that has a wave of user avatars in the background.

How to be Mysterious & Intriguing

The Hot Wheels section has tons of options but it also has a mystery car where you don’t know what you’re getting. That’s the one the speaker’s kids always want.

California Kitchen gives out a card prize but you can’t open it. You have to let them open it when you come back. It could be a free appetizer or $1,000. Great example of mystery.

LinkedIn will show you some of the people who have viewed your profile but you have to upgrade your account to see everybody who views it. It only shows you a teaser of who has looked at it though. A “leader in the design industry” for example.

Quantcast gives away website metrics for free then asks “Is this your site? Get Quantified to get more data.”

Playing Hard-to-Get

Private beta + social proof = a powerful combination, much like a nightclub where you have to be invited to get in.

Provide a limited interface. Twitter has a max of 140 characters. Rypple limits reviews to 200 characters.

Earning points to unlock features or spaces.

Sabre’s internal wiki:

• 60-70% of Sabre employees actively use the system each month.
• 60% of questions asked are answered within one hour of posting (90% in 24 hours).
• Average of 30 page views per employee per visit.
• Each post receives an average of nine answers.

Giving limited points to dish out to your own skillsets from a list forces you to limit your responses to what you’re really good at (great idea for a job applicant board!).

Lighten Up

Showing a “No Parking” sign. Now showing a Chili’s sign: Curbside pick-up only. All others will be crushed. Showing several other examples of humorous copy online.

Taking a Chance

You meet people at parties but you don’t really remember their names. Some sites throw in default data. Example: Brighter Planet encourages you to go green. It starts out by populating your profile with defaults and giving you a default rating. It asks for a lot of data but everything you enter affects your rating number. They only expose one form field at a time. You enter one and that form field goes away and it shows you the next one. This is both default data and a good feedback loop.

On Friskiness, Gifts & Pleasant Surprises

“Brains pay attention to what brains care about, not necessarily what the conscious mind cares about.”

What does the brain find interesting? Surprise, novelty, the unexpected, fun, playfulness.

Mailchimp has recommended sizes. If you make an email too wide it starts giving you warnings “ouch, stop it, too wide, etc.” If you make it too wide you tear the monkey’s arms off.

Will the real dopplr logo please stand up? Every visit the color bars change on the site. Very spartan site except for color. Color represents locations, cities around the world. But they don’t tell you that, which makes it a fun thing.

Why does this work?

Pattern recognition, playfulness, delightfulness.

Now What?

Sorry, no 9 tips or 5 lessons, but he is making a group of “mental notes” cards. The next time you’re sitting down with a group trying to solve a problem (ex: we need more registered users), you pull out a card and then brainstorm different ways to apply the principle of psychology that is on the card (ex: social proof). Cards will be available at the end of April. Preview packs of the first seven cards are being given away to attendees of the panel!

I missed a lot of stuff. I couldn’t keep up with the speaker. Good panel.

We specialize in large, corporate, committee-driven web projects. (paraphrased)

I’m talking about pain-free design signoff for your clients, not you! If the client is happy, you’re happy.

Paul is using the story style that he used in his recent article (it was either in Think Vitamin or Smashing Magazine–can’t remember right now) and in of his recent podcasts.

You present your perfect design and the client isn’t happy because you didn’t find out about his audience or other stakeholders. You presented only one design instead of three, leaving him with no way to pick and choose elements that he wants to build his own frankenstein website. Now he feels like he has to tell you exactly how to do your job:

“Can we fill in that whitespace with copy? Make it bold, make it bigger, make it brash. That’s what I want. Can you move it slightly to the left? Make the logo bigger.”

You feel like you’ve been reduced to a pixel-pusher and you start to argue that you’ve only budgeted for three revisions.

Do you ever say “screw it, I’m just going to give the client exactly what they want,” and just washed your hands of the project. Yes.

There must be a better way

The problem is that we are too defensive. We minimize the interactions that the client has on the project so that they don’t screw it up. We don’t do multiple designs because we know it will lead to Frankenstein creations. We discourage them from showing the design to others because we’re afraid of design by committee.

The client feels ignored, kept in the dark and like we think they’re idiots.

The Solution

Use the skills we already have and communicate.

What the client wants:

• To understand the process
• To have control
• To personally like the site
• (missed two others because I was dealing with a connection problem)

How to give them what they want while building a quality, user-centric site: collaboration not confrontation.

The six principles of collaboration

• Ensure the client understands their role. Explain that their job is to find problems. Our job is to find solutions.
• Have a strong methodology. It reassures clients and helps them to understand what the proces is.
• Include the client often and early. It lets them feel like they’re in control, makes them more engaged personally, gives them a feeling like they’re shaping the final result which helps them like it more personally.
• Educate the client about the decisions being made. Explain the typography, color theory, and other elements that went into your decision making. It helps them understand why you do what you do. It gives them confidence in you. And it gives them ammunition when discussing the design with other people.
• Ask for specific types of feedback from the client. Don’t ask them how they think. Ask them how they think their users will react to the design. Ask whether it meets business objectives.
• Avoid saying no. Say “yeah, sure we can do that, but it’s going to affect x, y and z.” They can then say yes or no, deciding what the project priorities are. They are in control.

Don’t ask them for sites they like. Show them sites you think are appropriate and talk through the elements you think apply and why you think they apply. Get their feedback.

Next show them moodboards. A moodboard shouldn’t take more than an hour or two to make. This is the “multiple comps” step but you’re not spending days building the different designs.

Next up build wireframes. You can build the wireframes with the client using paper or a whiteboard. You can involve developers and project managers at this stage.

Now you can move to the design mockup process. Now you’re producing a single mockup which won’t be a surprise to the client because you’ve already done everything else together. Now you want to present to the key contact rather than a committee. Because a committee will all have different opinions and they will try to find common ground, which means designing on the fly and making compromises. Now you’re back to the Frankenstein design.

Again ask if it meet business objectives? Does it meet the objectives? How will users react to it? Provide them with all of the background information. Paul suggests giving them a video with the mockup in it so that, when they send it around for feedback, they have to send the video with all of your background information and reasonings.

Design testing. The flash test: show it to them for five to ten seconds and then ask them to describe what they saw.

Iterations. One or two rounds of iterations instead of endless rounds because you’re already most of the way there before you even start designing the actual mockups.

Collaboration not confrontation

• Understanding roles
• Use a methodology
• Include the client
• Educate
• Control feedback

One thing I’m very proud of with the triage design: total images for the entire site (not counting any images I add for specific posts, like this one) are about 3.7kb. You read that right. 3.7 kilobytes. Not 370 kilobytes. Not 37 kilobytes. 3.7.

The new design will be a bit heavier than that, but I’m going to try to stay true to the principles of lean and mean. I’ve spent months trying to come up with a design that reflects me. Months before the redesign I was trying to create a new design. One road I went down was a three dimensional wall look. Another had me trying to creative an illustrated look. That second one definitely isn’t me but I wanted to grow who I was as a designer.

I’ll keep working on the growth thing but, in the meantime, the new site I’m designing represents who I am right now. And that’s a minimalist designer with a love of iconography and type. I’m including a mockup of the new homepage here.

Mockup of new homepage

After trying to come up with something for six months, when I finally let go I designed the new homepage in two hours.

Creating a website can be a daunting task, especially if you’ve never done it before. More and more people are turning to blog software like WordPress to get a site up and running with very little effort and even less know-how. Free themes let them quickly choose a theme that works for their needs, whether those needs are running a business or talking about their cat (I’m obligated to mention talking about cats whenever talking about blogging in a broad sense. Thank you for that media.)

The problem with free themes is that they usually don’t meet your exact needs or do exactly what you want them to. Then there is the problem that it’s hard to stand out and be unique when you have a website that looks identical to dozens, or even thousands, of other websites. If you use WordPress long enough, you’ll eventually want something unique.

This post isn’t going to cover how to build your own theme, that’s covered in other places. What I want to do here is simply provide some sources for inspiration. And, if you are just starting out, these sources also include lots of free templates that you can start with.

WordPress Themes

1. ThemeForest

   ThemeForest, part of the Envato network, at the time off this post offers 538 WordPress themes that range in price from $10 to $35. Each theme includes multiple screenshots you can look at as well a live preview. You can sort by rating, sales volume, price, and more. The sidebar breaks themes down by category including magazine, corporate, non-profit, and entertainment.

2. WooThemes

   WooThemes is kind of cool because they actually seek out leading web designers to create custom themes for them, which leads to them having some of the best themes available. At least from a visual perspective.

3. WordPress Themes with Unusual Uses

   Personally, I think the real power of WordPress theming is in the niche/custom themes. WordPress can be made to do a hell of a lot more than just blogging. Custom themes with custom plugins can create a turnkey wiki, or store, or real estate website.

4. A Comparison of 6 Popular WordPress Frameworks

   Frameworks are somewhat of a new concept, although in web years, I suppose they’re more like teenagers. Frameworks handle most of the heavy lifting, the repetitive stuff that needs to be done for each theme. You can build as many themes as you want that all use the same base framework, which itself is a theme. It’s a brilliant idea and, if you’re designing a theme and you’re not planning to roll your own framework, you should consider starting with an existing one.

5. WordPress Gallery from We Love WP

   Pure inspiration. We Love WP gives you a good idea of just how flexible your designs can be. The sky is the limit. If it can be a website, it can be WordPress theme.

6. WordPress.org Free Themes Directory

   The definitive source. WordPress has been aggregating themes since long before people starting building a cottage industry around selling “premium” themes. Since it’s open to anyone they’re not all gems, but you can do keyword searches or sort by popularity to help narrow things down.

7. Theme Release from Premium Mod

   These guys take existing GPL themes, modify and improve on them, and then re-release them. For free. They’re fairly new and “they” might be one person. I’m honestly not sure. I like the concept behind the site though and I hope the idea takes off.

8. RocketTheme

   RocketTheme releases one or two new themes a month. In November they did a big refresh on their existing themes, updating them all with new features.

9. 14 Fantastic Free WordPress Themes

   Mashable bills itself as the “Social Media Guide” and that apparently includes guiding people to free themes for social media software like WordPress. I wish they would drop the hyperbolic adjectives but, hey, they have advertisers to please and bills to pay. And their content is free.

10. 20 of the best Free Premium-like wordpress themes

    One more collection of free themes. These are definitely not all gems but there are a few good ones in the mix. Enough to warrant taking a quick look.

AIGA Austin Job Board

Be sure to read the AIGA Standards of Professional Practice. To post a job, go here.

Refresh Austin job board

Before posting a job, be sure to read their job posting guidelines. The Refresh Austin guys also run the Austin Web Design & Develop Meetup, which is a great place to meet designers and developers in the area.

Door 64

This one is geared primarily towards developers. Anybody can view jobs but you have to become a member to post jobs. Membership is free.

CraigsList

I’ve listed this one last for reason. As a job seeker you can expect to find a lot of crap job offers that pay either a fast food wage or a stake in the company (read: work for free). If you’re looking to hire someone, either know what you’re doing or avoid this option. Roughly 80% of your applicants will not be qualified. You can find good people and good jobs there though so I wouldn’t totally dismiss the site.

Of course there are non-local boards you can check out too:

• Authentic Jobs
• AIGA National Design Jobs
• 37signals Job Board

And there are a few staffing agencies worth talking to:

• Aquent
• Liaison Resources
• Art Squad

I’ve had the best luck, again on both sides of the fence, with Aquent. If you’re going to a talent agency, I’d start with them.

In order to continue to improve our products and deliver more
sophisticated features and performance, we are harnessing some of the
latest improvements in web browser technology. This includes faster
JavaScript processing and new standards like HTML5. As a result, over
the course of 2010, we will be phasing out support for Microsoft
Internet Explorer 6.0 as well as other older browsers that are not
supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the
Google Docs suite and the Google Sites editor on March 1, 2010. After
that point, certain functionality within these applications may have
higher latency and may not work correctly in these older browsers.
Later in 2010, we will start to phase out support for these browsers
for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above,
Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and
above.

I think you can expect to see more of this as the big boys go after one another. Apple’s supporting HTML5 for video over Flash players. Google has a browser-based OS coming out and leveraging HTML5 makes a lot of sense there as well. That’s a shot directly at Microsoft. Frankly, if the club being used is an open standard, I’m okay with that.

Aside from those guys fighting wars on a battlefield the rest of us are sitting on, it also raises an interesting discussion about website development versus web application development. While I fully support progressive enhancement for website development, it’s harder to achieve for web apps. From a practical standpoint there is the simple issue of cost. For instance, how much manpower should Google throw into alternative content for the Flash charts in Google Analytics? That’s just one item in one app across their entire suite.

I just wasted a lot of time answering the wrong question.

Almost a month ago the CEO of my company, Scott Abel sent me an embeddable video of an interview he had given. He wanted the interview to appear on our website but he wanted to know if we could do so without using the interviewer’s Flash player.

Well, a quick investigation found the interview posted to iTunes in MP3 format. Problem solved, right? Well, no. Next we had to secure permission to post the audio. This took a week and a couple of emails. Then we had to decide where we wanted to post it. News section? Our blog? Somewhere in our community? The item fell off the radar for another week.

Last Friday it came back on the radar. The decision was to post it to the news section. I checked with our server admin to see if we needed to post it to Fileburst or if we could just host it ourselves. I wanted to wing it because I didn’t think there was much chance of it getting a lot of traffic. He was the (correct) voice of reason: multimedia files go on Fileburst.

Next discussion: headers. Did we want it to play immediately, force a download or leave it up to the user. We didn’t want too many concurrent connections to bog down our Fileburst server if the file saw a sudden burst of popularity, so force the download.

While he was uploading the file I went back to the iTunes podcast to see if I could avoid the whole hosting/serving issue altogether. I had an ITPC link to the podcast’s RSS feed but that forces people to use iTunes. Replacing the ITPC protocol with HTTP pulled up the standard RSS screen. Using that requires people to be familiar with RSS and RSS feed readers.

In the description of the feed was a direct link to the MP3 file. But the MP3 autoplays in the browser with no context and no obvious way to download and save it. And you can’t download it until it finishes loading anyway, adding yet another layer of confusion. Not the best user experience. And, what happens if the owner decides to move where the MP3 file is hosted?

So now I can serve up the ITPC link, the HTTP link or a raw link to the MP3 but each solution has drawbacks and none of them provide a particularly compelling user experience.

It was while mulling those options that I experienced a particularly lucid moment.

I went to the website of the company that did the interview and found where they posted it on their site. It has a descriptive title, some lead copy, a picture of our CEO, and links to play it in the browser, download it, subscribe to the RSS feed or subscribe to the iTunes podcast.

The worst part is that we always link to the source webpage.

This was a very simple issue that was turned into complex one because I never stopped to ask if I was asked the right question. I just tried to answer it.