FallenRayne Dev One developer's random thoughts are better than nothing.


An Event Apart Day 1 – Seattle 2011 (notes)

So my company decided to send a co-worker of mine and myself to An Event Apart (aea) in Seattle this year. This is an extremely exciting and unexpected part of my career in this crazy web development world. I never really thought I would be going to a major web conference like this.

This is going to be my little break down of the presentations and my take aways.

Jeffery Zeldman - Web 2.1: The Medium Comes of Age

The conference started off with the man, the myth, the legend, Jeffery Zeldman. He is the author of Designing With Web Standards and the co-founder of A List Apart. He started off the conference with a history lesson. It was a history lesson about not just the web, but about communications in general. It was a fascinating presentation going back to movable type and the print press all the way to the present day with Facebook and Twitter. His discussion really ended with the advent of the new buzzword "Web 2.1". Please for the love of God do NOT USE THAT AS A REAL CATCH PHRASE! What Zeldman was talking about with web 2.1 was that mobile web is really where it is at. We need to have a better focus on the mobile because it is starting to take over the industry.

His presentation was very informative and a really good way to start off the conference because a lot of the other presenters actually drew from that and built upon it.

Sarah Parmenter - Crafting the User Experience

This presentation was in the top 3 for me. Sarah had an amazing stage presence, was very informative, was funny and engaging, and had a great accent (which always rocks). To be completely truthful, it was not the accent that puts her in the top 3. The content that Sarah provided was just awesome. She talked about how psychology affects the user experience and can craft what the user will expect or how the user will think in certain situations. First impressions are a major way that humans digest information. We make an initial impression of someone or something in the first 3-5 seconds that we look at it. We then spend the next 1-3 minutes trying to confirm or dispute that original impression.

Sarah then went into talking about how this has affected marketing. As an example, she showed how 7-Up changed the hue of their can by adding 15% more yellow to the can. By doing this, people suddenly thought that 7-Up had more of a lime flavor than before even though the formula had stayed the same. She discussed Coke vs Pepsi as well as butter vs margarine.

She also discussed Dark Patterns, or Anti-Patterns. These are the absolutely amazing marketing tricks played by certain companies. I do not say amazing in a good way. This is when a company hides opt-out options deep in the bowels of a form, or won't allow the user to opt-out even if they want to. These patterns are generally used when

Finally the 5 Basic Principles of Human Psychology in Design were discussed.

  1. Speed
  2. Simplicity
  3. Surprise
  4. Social Behaviour
  5. Stirring Emotions

Speed: "Most people make up their mind unconsciously about something within 2-6 seconds". Help guide users to the way you want them to see your design and your site. Give them the important things up front and make it quick to get to them.

Simplicity: "Often in communication, we suffer from the 'curse of knowledge' - trying to say too much. The most effective messages are clear and simple" Understand your user and offer simplicity where possible. Take something that is complex or boring and make it fun. Simplicity should be a focus, the more complex a system, the less your users will want to use it. Perceived simplicity is almost as important as real simplicity.

Surprise: "Your communication can be more effective if it challenges normal expectations or arouses curiosity." Sometimes it is good to buck the norm. If you make your users wonder you can reel them in because of their curiosity. Changing See More button from green to red can cause the user wonder why it is red and make them click it. Hide things and make the user guess. This can engage the user and make them feel happy and proud when they have found the hidden elements of your page.

Social Proof: "Understand 'herding' behaviour and how communication from friends or groups affects how we act in situations." How people will follow other people. This is true in design as well. Apple uses social influence to help with sales. "Pre-filling" a tip jar could cause more people to tip because they believe it is the norm. Showing how many people follow you on your personal sites can lead to people thinking "Maybe I should follow this person too if so many other people already are!" Facebook and the games on Facebook are also very good at this, they get you to click on things because your friends have clicked on them before, follow the herd aka Peer Pressure Lite.

Stir Emotions: "You need to make them feel that they care about the issue if you want them to take action. Negative and positive emotions can inspire people." People will get emotional about products if you help lead them to that. If your products tell a story people will become more emotionally connected with the product.

Jason Santa Maria - On Web Typography

Jason started off his presentation by talking about the past. He talked about how we have moved from almost no variance in the fonts we use to today where we have literally millions of fonts available at any given time. Type matters, it matters for marketing and brand management, it matters to convey emotion and feelings, it matters to make things more readable or flashy. Type is important.

Typography is hard, it is a specialized skill, but it is something that can be taught and it is very important to know a little bit about it.

  1. What makes a typeface good or bad?
  2. How to look at type
  3. Reading and Perception
  4. Considerations for design
  5. Methods for choosing typefaces

1. Typefaces are not evil, it is the improper use that is evil Somewhere in this world there is a proper application of Comic Sans or Papyrus... just not on the web. There is no such thing as "good" or "bad", it is merely the use of the typeface that matters. Use an elegant typeface on a grungy background to make the elegant type stand out that much more.

2. "Type is a beautiful group of letters, not a group of beautiful letters." - Matthew Carter. Typefaces are placed into different roles. There are Display faces (for headers, titles, and various other headline style uses) and there are Text faces (for blocks of text or more heavy reading). A Text face can be used in the place of a Display face by not vice versa, this is called a Workhorse Typeface (e.g. Bodani, Meta).

3. Reading is affected by the perception of the font. We think we see the individual words when reading but what we really see is the flow of the text block as a whole. We translate the text into images and if the text flow is hard to follow then it is harder to translate. Text blocks have a couple of parts when reading; first is the Saccade, the jumping of your eye as your read through the text, and then the Fixation, which is the point where your eye focuses on the text. The goal is to make the Saccade as small as possible so that the text is easier to comprehend. Jason also showed a block of text where he removed the bottom half of each line and the text was still readable. He then did the same thing but removed the top half, the text was no longer readable. This is because most of the important features of text is located in the top half of the font. "Good Typography is invisible". "Ugly Fonts" do not make comprehension better. They are more distracting than helpful. Contrast is important as "Typography is an art of contrasts". Knowing the contrasts between the fonts and font-weights is important.

4. There are no RULES for typography, just some really good GUIDELINES. Reduction is important. Simplify your design. Do you really need to have a Display font for your title, another for your header, then a Text font for your menus and another for your content. Would it be possible to change all of that will a single Workhorse Typeface by just change the contrast and some minor details of the font.

In practice, bigger is better for fonts. It is good to error on the side of too large than too small. Contrast is necessary. Bold the important pieces, change sizes, make the differences stand out. The longer the line, the more line-spacing is needed. More color (intensity of color, such as the contrast between grey and black), more line height.

Lettering.js (a jQuery plugin) provides more control to the designer to do what they want with each individual letter through CSS. A very handy plugin for future work.

5. Considerations for a good font: Dimensions, Special Features, Prolonged Reading, Internationalization. Avoid readymades (like Playground) and stick with more traditional fonts, just find better ways to use them. Develop a personal palette, a set of fonts that you fall back on. Also, make sure you know your history when it comes to fonts, don't just pick something that looks cool. Greek fonts shouldn't be used for Roman papers. Assign mental associations for fonts to make it easier to pick them. Know what feelings a font conveys and use that to help drive the design. Find alternates to commonly used fonts. See if something else that is like it exists, it might end up being a better use. Try fonts out. See what works.

Scott Berkun - Why Designers Fail and What to Do About It

This presentation was mostly geared towards designers but really works for almost anything. "All designers fail 95% of the time", that really could hold true for just about any profession. As a developer I know I fail 95% of the time. I fail when I think a button might look better on the left side of a form instead of the right, or where I think a foreach loop would be better than a for loop. The key is to own up to your failures and mistakes, study the failure and common situations that cause them, and study how to avoid these failures and mitigate the effects. Failure affects everything but design does not have a really good way to analyzing the failures (neither does software if you ask me).

Scott showed a bridge that I incorrectly identified as the Tacoma Narrows bridge. I was partially correct though because it was actually the sister bridge to the Tacoma Narrows, the Bronx Whitestone Bridge. He showed that with the failure of the Tacoma Narrows they were able to correct the mistakes and make a bridge that still stands today.

There are two types of failures; Fundamental (system collapses, people die; rare and dramatic) and Partial / Subjective (mixed results, works but not perfect; common and debatable). He mentioned the Maginot Line in France that was used to try to stop the Germans in WWII. The French used the experiences of WWI to build the line not thinking that the Germans would just be able to go around it.

Failure is necessary. Without failure there is very little learning. Take the Newton Platform by Apple; it was a failure but it helped spawn Palm Pilots which helped spawn Blackberry, which helped spawn the smartphones of today.

Design fails as you design. It is ok to throw things out. It is ok to fail on a regular basis.
Think outside the box. Rubix cube (nothing says you can't take it apart and put it back together.)
Re-frame the problem. Try to look at it in a new way.

Skill failures:
Poor colaboration skills
Poor pitching skills
Failure in business knowledge

Organization failures:
How do I work in an organization where failure is present.
How do I work around the system to try and correct the failures.
How do I hack this organization to get more control.

Top Ten Overall Issues (failures geared towards designers but true for many facets)

  1. Non-designers making design decisions
  2. Designers do not seek enough data before starting
  3. No time is provided for long term thinking
  4. Designers not receptive to critical feedback
  5. Designers ignorant of business fundamentals
  6. Only lip-service is paid to "User centered design"
  7. Everyone on team has their say on design issues
  8. It's never made safe to fail or experiment
  9. Designers have Poor persuasion / idea pitching skills

All of those hold true with developers as well.

Kristina Halvorson - A Content Strategy Roadmap

Kristina had a great presentation that I actually found a little hard to completely follow. It was not that the content was over my head, it was that I do not currently work with content. Almost all (99.7%) of the content in the current application I work on is user entered.

Kristina basically said that content is generally under appreciated and normally is the last thing on people's minds when building a website or web application. Project management seems to loose focus on content and then the content is generally just thrown together and put on the screen. In many cases the same content will be on a page for 5-6 years and be so out of date that the information is nearly useless. Too many times we believe that it is the client's job to work with the content but it should be ours as well. We need to tell the client when content should be updated. We should feel some level of responsibility to that client to help them with the experience of their site. Kristina showed a great image of a Mai-Tai. This image showed that the glass and all of the extra stuff around it was the user experience but the actual liquid inside the drink was the content. The glass, umbrella, straw, fruit, and napkin are useless with the precious liquid inside.

Content Strategy is important. Kristina showed a quote from the art of war: "Strategy without tactics is the slowest route to victory. Tactics without strategy is the noise before defeat." This holds true with content. It is important to completely map out the content on the site. Figure out when things need to be updated, how, who is responsible, why, and with what priority.

Content Audits are important to run. They are boring, but essential. They show where all of the content is on the site and maps it out so that it can be tracked. The important questions can be asked like "Who owns the content?", "Where do content requests come from?", and "Why does this content exist today?".

Content should have requirements just like software. If you tell me that you need a small space to put a message of the day, I will give you a small space (~200 characters) to put your message. If that message turns out to be ~1000 characters then that will break the design and could break the functionality of the page.

Content needs to be fully designed out. Know exactly what pages will be built and with what data. If the user says that they will have a couple of biography pages for a few people, ask which people, and who owns the content, and who updates the content, and how it will affect navigation. These are all important questions when designing the website.

Use Page Tables to convey the requires of the contents of a page. You can search Google for "page table content strategy" and you will find many pages that talks about this concept. It basically shows exactly what data will go where and how often it should be updated and by who. A content calendar is also a very useful device, especially with sites that have lots of content that needs to be updated on a pretty set schedule like an article site or heavy use blog.

Finally, just because the deployment was successful doesn't mean that the job is over. If you have content that quickly goes stale, sitting with the same content for a month after deployment could be the death of a great project. Maintaining the content is essential.

Luke Wroblewski - Mobile Web Design Moves

This talk was all covered in the A Day Apart workshop so I will put my notes for this there. This was probably my only great frustration with AEA is that this talk was even here. I felt a little ripped off that I paid for this talk twice essentially.

Day 1 Conclusion

Day 1 was great! Awesome conclusion, right? Basically I was happy with every presentation. My discontent with Luke's presentation had not festered yet, that happened on Day 3. All of the presenters were brilliant, articulate, and had great information to share. I didn't put down everything that they discussed but these were most of my notes. I paraphrased a decent amount of what they said, and I may have misquoted some of the information so please take my notes here as more of a compelling to tell you to go to An Event Apart yourself to fully enjoy what is offered.

I will continue on with Day 2 soon, and then I will throw a curve ball by discussing Day 3! And finally, I will discuss everything else about the experience in my final article.