• Its not about the application, its about the experience
• Good design disappears into the background
• The Twitter experience is about ambient intimacy
• What are web-based applications?
  • Where user needs, business, & technology collide
• Corporate underpants: when the organization of your company shows through on your homepage; “Like wearing your underpants on the outside of your clothes.”
• How do we create great experiences?
  • Not measurable & no patterns known
• Three elements of knowing whether a team will produce successful web apps
  1. Vision
  2. Feedback: In the last six weeks have you spent more than two hours watching someone use your design or a competitor’s design?
     • What matters is the amount of exposure your team has to this feedback
  3. Culture: In the last six weeks have you rewarded a team member for a major design failure?
     • You must be able to take risks in your designs in order to make things better
     • When we fail we learn incredible things
     • Every failure is an opportunity to learn
• Less and less people are comprising teams but the roles are expanding
  • Need to think in terms of skills, not roles
  • The future of design is based on skills that people have, not roles that they fill
• Editing & Curating: deleting and picking out the right stuff for the design is important
• Paradox of choice: the more choice you give people, the less satisfied they will be
• Kitchen cabinent problem: you know where everything is in your cabinets so you resist change
  • Can make things more transparent but makes things look more cluttered
  • Think about the process of change over time
• Make sure that someone is editing and curating

Serious Play: Designing Seductive Business Apps

• How to use the cards
  • Define a behavior that you want to occur, flip over a card and brainstorm
• thefuntheory.com
• Sequencing creates easily attainable goals that are smaller to achieve
• Sabretown/Cubeless = 5,000 employees
  • Must work for features and unlock them
  • Knowledge retention tool for a company
• Make sure you convert your business goal into a behavioral goal
• What do people have to do in order for your business to be successful?
• Foodspotting.com
• five.sentences
• Attaching a measure to something automatically makes it a game
• Johnny Holland Magazine
• Personal Velocity
• Once we own something we value it more
• brighterplanet
• Social proof: commonly used -> testimonials
• legalzoom
• Motivate human behavior through psychology
• getmentalnotes.com
• poetpainter.com

Escaping Navigation Hell by Hagan Rivers

• Design without navigation first, assume its perfectly designed and it was easy to get there
• Navigation is an application
  • Job is to find the right screen
• Design navigation systems last
• View navigation at 30,000′
  • Application maps utilizing tag system
  • Clouds are hubs but not pages
  • Green = new, blue = edit, yellow = general, orange = wizard
  • List all your screens, take screenshots, tag, make application map
  • OmniGraffle
• Application map vs. site map?
  • Site map is hierarchical
• The hub is a workspace where you do work and come back
• Site maps don’t always work because not everything is hierarchical (what parts are equal, etc.)
• 4 kinds of navigation
  1. Local Navigation: how to access spokes from the hub? Local nav on spokes too!
     • Modal spoke: okay, cancel
     • Websites and web apps are different
     • Non-modal spoke
     • What do I “need” here?
  2. Global Nav
     • Design last
     • Appears everywhere
     • Do not list every screen in the app
     • Link to major hubs
     • Links don’t have to appear equal
     • Link to important parts only or used a lot
     • “New” screens -> creating new things: Salesforce example
     • Selection screens: have to make a selection to see
     • What is useful to your users? (need the right hubs)
  3. Cross
     • Cross navigation is the concierge of presentation
     • Related items
     • Can show up any time
  4. Dashboard +
     • Reporting but also shows how the application should be used (multiple links available that make sense)
     • Tell a story of how the application works
     • Contextual way to display links
• Navigation is something you’re going to iterate through most
• Don’t allow customizable navs
• Do not draw lines among the hubs
• Are those hubs for the public or me?

Designing the Social In

• Need to be organic and about relationships (flexible)
  • Not about data and a database
• 5 principles to bring social in
  1. Pave the cowpaths
     See what people are doing and adjust or make it easier to do what people are already doing with the pieces you give them
  2. Talk like a person
     Talk in a conversational voice, ask questions, your vs. my, no joking around, self-deprecating error messages (never make the user feel stupid)
  3. Be open & play well with others
     Embrace open standards, sharing of data, accept external data, support 2-way interoperability
  4. Learn from games
     What are game mechanics? Collecting, points, feedback, exchanges, customization
  5. Respecting the ethical dimension
• 5 practices
  1. Give people a way to be identified and can identify themselves. Need to have a way to identify themselves more than just by name = user cards, profiles, avatars, personal dashboard, signs of life, levels, reputation, collectible achievements
  2. Make sure there is a “there” there = social object. The social object is why two people are talking to each other.
  3. Give people something to do. 10% of the people are doing 90% of the work. Majority of people do less of the work. This is about a continuum of stuff to do.
  4. Combine activities for richer experiences. Lead to relationships.
  5. Enable a bridge to real life
  6. Let the community elevate people and content while gently moderating
• 5 antipatterns (common mistake or bad solution to a common problem)
  1. Cargo cult
     Copying a visual design or a feature without understanding the underlying reason why it works
  2. Don’t break e-mail
     Don’t break things and the way they ordinarily work
  3. The password antipattern (phishing)
  4. The ex-boyfriend bug (group people together)
  5. The Potemkin Village (creates spaces when needed)
• The ecosystem is a balance with tradeoffs

Backstage at 37signals by Jason Fried

• The first company to build an entire business around web apps
• Constantly moving on to different projects (2 wks)
• Always want to work on the real thing right away; no use for abstraction
• Sketches should be with huge Sharpies so as not to concentrate on details
• Build HTML mockups right away
• Share it, use it, tweak it
• When you get rid of everything else
• Navigating the overview page
• Pull back slowly in the design to view from farther away
• Reduce the words on the screen to avoid being robotics
• Important to test try time interactions
• Checkmarks into strikethrough
• Use git for version control
• Context more than consistency
• “Rework” by Jason Fried

Designing for Interesting Moments by Bill Scott

• “Designing Web Interfaces” book
• The magic of misdirection
• Creating illusions
• Interactivity is both in the details and in the performance
• Drag & drop, iPad stack deleted is all an illusion
• Amount of events and objects multiplied together equal the interesting moments
• Be thoughtful about the points of engagement as well a the points you do not emerge
• Delicacy of the illusion is important
• 6 principles
  1. Keep moments direct
     • Editing moments: pay attention to discoverability, use a clear “call to action”
     • Activation/deactivation moments: use the same button to turn off and on
     • Drag & drop moments: small target antipattern, reduce physical and mental uncertainty
     • Artificial moments: use the correct behavior for the task, keep the approach simple, creating a visual metaphor that’s incorrect for the behavior
  2. Require only a light footprint
     • Remove barriers
     • Unnecessary moments: popups for no reason, “idiot box”, dont’ stop the proceedings with idiocy
     • Heavy moments: be mindful of the “click weight” (# of interaction steps, decision time, seek time, second guessing, wait time)
     • Visible moments: interactivity, make primary actions visible
     • On Click moments: overlay revealed on click
     • On Hover moments: overly revealed on hover
     • Clicks are explicit actions, hovers are not
     • Strike a balance between readability & interactivity
       • Hover & cover antipattern
       • Shifting content antipattern
       • Needless fanfare, mouse trap, novel notion
  3. Maintain flow
     • Change blindness: try to get rid of page refresh
     • Users can loose their context going page to page, encapsulate alternate flow into overlay
     • Interrupting moments
     • Look ahead moments
     • Use inlays for strong contextual relationships
     • Behind the scenes moments: consider the backstage
  4. Invite interaction (Dustin Curtis)
     • Use a clear call to action: new moments, use new visits to introduce new features
     • Prompting moments: add discoverability
  5. Show transitions: great power and great responsbility
     • Imagine a world without drop down animations
     • Consider cutting the effect in half
  6. Be reactive
     • Narrowing moments, use live previews, live form errors
• billwscott.com/share/presentations/2010/wamtph
• Farecast

The Care & Feeding of a Corporate Cash Cow by Kellogg

• Building a Toolkit: start with your strength, negotiate, evangelize (tell people what the team is doing, mistakes, etc.), new directions, different tools, optimization
• Research callouts
  • Less is more
  • Core 5 ideals changed
• Unique environment
  • Transactions are only part of Marriott’s revenue
  • Powered by mainframe tech.

Input: Moving Beyond Static Web Forms by Luke W.

• Moving beyond static forms

1. Rich interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration and set-up
4. New capabilities on mobile devices -> physical location

• 40% of people drop off before completing registration
• The more people use your mobile site, the more likely to use regular site
• Top aligned labels are best on mobile
• Input capabilities on mobile: form field, location, gestures, images

A Simple Ladder of Engagement by Mark Trammell

• @trammell
• “Be a force for good”

Turning Back to the Future by Jared Spool

• Commoncraft Show
• Executive “swoop & poop”

More stuff to Google & learn

• Tookmark (twitter bookmark)
• Snaptell
• Notable
• Brightkite
• Elegant.ly
• Naymz
• Tripit
• Posterous
• Instapaper

This was my first An Event Apart and I was particularly struck by a few things.

First, mostly all of the seminars offered directly related to my work and career. There was no picking of what classes you wanted to take, but rather, you sat in one room all day and the presenters came to you.

Second, it was a well planned event. There were 15 minute breaks between seminars, ample time to hit the restroom or schedule your dentist appointment back home (yep, I did that), and each day was just long enough. Monday’s classes ran from 9 am to 6:15 pm and Tuesday’s classes ran from 8:15 am to 5:30 pm (although many would tell you that Tuesday’s 8:15 am was optional since it was a Microsoft presentation, ). Lunches were 1.5 hours long and were great opportunities to have a leisurely lunch and get to know other conference attendees.

Thirdly, the food was fantastic! Fully catered breakfasts and lunches made me feel important and eliminated the stress of “Where is my next meal?!”.

And finally, all of the presenters were just really cool. Most of them walked around the ballroom and hallways during breaks, talking to various attendees, and shaking people’s hands. They were all really nice people and easily approachable. It was nice to know that I was amongst such down to earth people.

There were quite a few presentations that stuck out in my mind. The following is my attempt to document the knowledge I picked up at this conference.

Jeffrey Zeldman’s A Site Redesign

Once the initial shock of actually seeing Jeffrey Zeldman in front of me wore off I was eventually enthralled by his presentation. Zeldman spoke of two situations in which a site redesign may occur: the client, or, in-house approach and the homegrown when-the-client-is-you approach.

Client-based Redesign

A client-based redesign starts with the following question: “What problem are we trying to solve?”. At this point Zeldman spoke of how in-house designers are treated in various companies. He stressed that, as a designer, sometimes we are not quite treated as “grownups at the table” and that all we’re good for is “decoration” and sprinkling on some pixie dust. He emphasized that design is about creating a user experience and that in order to receive some credibility in your company you should become involved in a project as early as possible to understand the business objectives behind it. Research is one way in which you can establish yourself as a credible partner within the scope of the project.

One point that Zeldman made that I felt was particularly amusing was when he said that “designers and their bosses should not be having conversations about fonts, color, or design,” but rather, they should be “having conversations about products.” Why did I find this so amusing? Because I feel that conversing about fonts, color, and design is the bulk of what my conversations are about. Whether its at my full-time job or in my freelance, someone always has to question my color or font choice. It can drive a designer batty, especially when the client (whether in-house or freelance) thinks they know more about font X or color Y than you. But I digress… Ultimately designers need to be seen as strategic partners and not pigeon-holed as “the person that makes things pretty.”

Components of a Site Redesign

Initial components of a site redesign include: no-holds-barred brainstorming, scenarios, wireframing, and content strategy.

Brainstorming with a client or in-house can help put you in a better position later down the road. It is a proven psychological phenomenon that if you talk to someone about their needs and deliver a product that is perceived as meeting those needs then the client will be more likely to buy in to your work. As the designer, you should be engaging people from the very first meeting so that they perceive you as an ally.

Scenarios were a concept that up until An Event Apart must have been residing deep in my brain. I had never heard of them before but, once explained, I remember vaguely learning about them in a past life. It goes like this: pick a few types of users that you think will visit your site. Set up a document that outlines the specific goals that each one of these types of users may try to achieve while on your web site. Then, document the process that it would take for them to achieve these goals on your site. These users should be developed into full personas with names and life details.

To do the right design, Zeldman emphasized the importance of having a content strategy. Apparently this label “content strategy” has been a big idea this year but I feel like I’ve been trying to push it all my life. Basically, everything about a design should be based on the content that is going to be presented. Designers cannot, and should not, have to pull designs out of thin air without having content provided. Period.

Speaking with Clients

Zeldman offered many helpful tips when talking with people about design and your work.

First of all, Zeldman demonstrated his idea of breadcrumbing a conversation. When speaking with a client about your work or upcoming plans, be sure to keep repeating where you’ve been in the conversation. That way you’ll both be on the same page and will be able to recap what occurred during your conversation when it eventually comes to an end. Oftentimes, visual people think things are blindingly obvious and it is our job to make sure that others see the blindingly obvious.

Secondly, sometimes clients try to get at what they want indirectly. You must learn to read between the lines of a conversation and interpret what their actual problem is.

Finally, you as the designer definitely do not want to start any conversations about pixels, fonts, colors, and layout. If you start to talk about them then the client will want to change them. Instead, try to gear your conversations towards tactical problem solving measures. Your job is to sell ideas, not pixels. If a client questions a particular item try to relate it back to the demographic that is actually going to be using the site. Every question posed by the client should be answered with some sort of user-, research-, or problem-centric point.

Homegrown Redesign

The first thing to do when starting to work on your own web site is to do a “competitive audit,” or as we designers like to say, looking for “inspiration.” What is going on in the web world today and what are other sites in your field doing?

From this point on Zeldman began to use his own site, zeldman.com, as his example of a homegrown site.

The question you must ask yourself when starting to design is, “What problem are we trying to solve,” or, “What are we trying to achieve with this web site?”. People have many reasons for starting their own web site: portfolio sites, discussion/blogging sites, etc.

Whatever site you choose to design though, should always invite reading. And whenever reading is involved, wide pages are not the way to go.

As with the client-based redesign strategy, all design should start with the content. In the case of Zeldman, he did a pure text dump into a .html page and started to immediately style his content; he calls it “design from the content out.”

One interesting tidbit I picked up from this presentation was the use of a grid background gif. Grid-based design can be made even easier by simply applying a grid background to your entire site. This way you can see exactly where your columns are lining up and won’t have to rely as much on the accuracy of your math. Zeldman was quick to mention though that you do not need to be a slave to your grid and that introducing a little asymmetric white space never hurt anyone.

Your own site is also a perfect environment for introducing some progressive enhancement. Sure, throw all of the CSS3 you can at your site – just make sure its still functional in those oldy moldy browsers as well. Details may not matter as much to you in all browsers as they would to a client so be adventurous.

And finally, Zeldman pushed the idea that contrary to major belief, there is no fold. Studies have shown that most people do scroll on a web site so the concept of putting things above the fold is not nearly as important as it has been in the past. In particular, Zeldman was demonstrating his site’s large footer that has become particularly popular as of late.

In Conclusion

I found Jeffrey Zeldman to be a dynamic speaker with a great sense of humor. He has wonderful insights into the various problems that all designers face on a daily basis and can offer useful tips on how to handle said problems. I would recommend that anyone go and hear him speak.

I wanted to write more than this but I simply wrote so much about Zeldman and I haven’t had time to write about the other speakers. Ack! When I have time I will follow this post up with more!