Functioning Form

At An Event Apart in Atlanta GA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Here are my notes from his The Curious Properties of Intuitive Web Pages presentation:

• On the Avis car rental form, asterisks mean optional. This caused many people to believe that they had to fill in information that was not required. At some point, asterisks came to mean “required” on Web forms. How did that happen? When we use the asterisk incorrectly, something becomes unintuitive. But since this convention was created by someone that means we can create intuitive designs on purpose.
• When something is unintuitive it steals the focus of the user from what they actually want to do. It gets in the way of a task. An intuitive design is when the user is focused on their objective or task.
• Intuitive is something you learn. For example, once you learn how one scrollbar works, you expect the same elsewhere.
• An intuitive design is invisible. Good design is invisible. It is like air conditioning –you don’t notice it until something is wrong.
• It's not novelty that causes problems with intuitiveness, its not simplicity. Intuitive is personal –based on what people currently know and their previous experiences.
• When too many things are competing for a user’s attention nothing wins. Keep the focus on someone’s objectives not on the interface.

• Magic Escalator of Acquired Knowledge: when you are at the bottom, you have no knowledge of how something works and when you are t the top, you know everything about how it works (usually only the engineers who built something are here).
• There are two points on this continuum we care about. Current knowledge (what the users already know), target knowledge (what they need to know), the knowledge gap is the space in between (what we need to design for).
• A design is intuitive when current knowledge is equal to target knowledge. A design is unintuitive when there is a gap between current & target knowledge.
• We can reduce target knowledge until it meets current knowledge by simplifying the design. We can move current knowledge to target knowledge through training. These are our two options for design.
• The “gap” between current knowledge and target knowledge is where design happens.
• A design is intuitive when the knowledge gap is really small. In other words, it’s easy for people to bridge from current knowledge to target knowledge. In these cases, people don’t realize they are being trained.
• We can give people more control over change through tiered introductions, the ability to switch between new and old versions, and small ongoing tweaks instead of major redesigns.
• An intuitive design happens when we don’t force our users to attend to change.
• When people encounter situations where knowledge gap is large and they have to use things –people despise these experiences. If the knowledge gap is large but use is voluntary, people avoid these things. When knowledge gap gets smaller, people either tolerate or are cautious about using things.
• If knowledge gap is small, people will love the service. That’s the opportunity for you and your competitors.

• Redesigns can increase the gap between current and target knowledge. People know how to use things and we switch things up on them.
• There’s just a small number of people how are responsible for actual income. Yet most of the time we try to make the design better for everybody. Yet don’t need to do that. We just need to focus on the people who are most important.
• With a redesign we are usually designing for everyone not for the people who matter most.
• A major retailer launched a 100M redesign and saw conversion drop 20%. Their site was no longer intuitive for their most important users.
• In the name of making it easier for everyone, we make things harder for the people who use things everyday.
• People don’t hate change they just hate change that takes away their current knowledge.
• Users only focus on local (relevant to their task) options. They don’t pay attention to the other stuff. But these things still get added because of internal turf wars.

• The medium of design is behavior. We want people to work differently with the designs we create. Each different design drives different behaviors.
• Interaction design, visual design, user research, copywriting, information architecture all play a role in influencing behavior.
• Socially transmitted functionality: someone has to show you how to do something. You’re unlikely to discover it on your own.
• Conventions of proximity and muscle memory drive which conventions people will expect.

• We have a number of techniques for uncovering knowledge.
• Field studies: observe people using your products in their natural environment. Helps identify current knowledge.
• Usability studies: help identify target knowledge and the gap.
• Paper prototyping: quick way to learn where target and current knowledge sit.

In his Buttons are a Hack presentation at An Event Apart in Atlanta GA, Josh Clark made the case for moving beyond GUI controls on touch devices. We can do better! Here are my notes from his talk:

• Touch interactions will help us sweep away buttons and a lot of existing interface debris by moving us closer to the content and away from GUI abstractions.
• Touch devices have created all kinds of expectations that the Web does not implement well. Currently the Web is not an equal citizen for interaction design on touch devices. Since the Web only supports simple touch interactions, native OS applications are leading innovation on mobile.
• Real support for touch gestures is needed in the browser. Right now we only have touchstart, touchmove, and touchend. We need to push for more complete gestures in the browser. Web browsers really only support tap and swipe. There’s limited support for pinch, zoom, and press.
• We need to be more creative and collaborative with developing gesture conventions.

• Buttons are a hack but they are an inspired hack. They operate at a distance by creating abstractions away from content. Do we still need that hack on a touch interface? Can we instead aim for direct interactions with content?
• How do we help people to use software that has no labels or buttons? This is the state of many touch interfaces.
• As we develop a new gesture vocabulary, we’ll need affordances to communicate what’s possible. Buttons aren’t going away right now but we can explore other options.
• Gestures are the keyboard shortcuts of touch interfaces.
• Let people use entire screen as control: swipe and paw instead of tap-tap-tap.
• Big screens invite big gestures. Where can you eliminate buttons and use the whole screen for controls? Let people be lazy in how they interact with content through big targets.
• On larger touch screens, Fitts’s Law still applies. Cognitive and motor effort is increased when people need to touch small targets across the screen.
• Button alternatives: Pinch to cancel, or close view (like Reeder app). Swipe thru history (like Twitter for iPad).
• How do you find gestures? They are hidden, unlabeled, and as a result hard to discover. People will figure things out by trying physical or mouse-based conventions as gestures.
• Rely on visual clues or past experience. The less a gesture resembles a physical action, the harder it is to find.
• Muscle memory allows us to get things done faster than with conscious knowledge. We can start with physical points of reference. Example: turning off an alarm clock.
• Physicality invites touch. Textures and physicality draw people in. Real world metaphors need to meet expectations.
• Nature doesn’t have instructions. Design for nature. Realistic interfaces (if done right) can hint how UI works.
• Ensure you follow through on your metaphor, if your interface suggests a gesture –support it. Don’t follow a metaphor too literally or half-heartedly.
• On a touch screen, visuals are also hints on usage. Be careful on what your visual designs imply.

• Who needs a control when you have the content itself? Even better than labels is no labels. Example: clear salt and pepper shakers.
• Up front instruction manuals make things feel more complex than they really are. Few people read the manual because most of us are impatient. A manual should be a reference not the primary way to learn to use something.
• Because people don’t read we often resort to show and tell. But being told how to do something takes a lot of the joy out of using it. You learn to interact with the world through trial and effort.
• Toddlers understand the idea of trial and error. Toddlers haven’t been poisoned by 30 years of desktop interactions. Use them to see how approachable your interfaces are.
• Don’t patronize or dumb down your apps but be patient with people as they come to terms with how to interact with your app.
• Video games are a good model for how to introduce people to new modes of interaction.
• Coaching, Leveling up, Powering up. Active participation is the best way to learn. Coaching allows you to practice as you interact with a service in real time. If you can avoid forcing people to read in coaching even better.
• An important element of coaching is not revealing everything at once. You start small then build up over time. Ease people into an app with an element at a time.
• The best time to learn a skill is when you need it.
• Levels that require a feature are the best time to teach that feature. The first time through, it is a guaranteed success.
• Think about your app as levels. How can people move between them as they learn how to use it? Where can you help people level up?
• Power-ups are ways to turbo boost your games. They provide shortcuts. Shortcut gestures can tackle common actions that could be streamlined.
• Facebook has a custom gesture to get back to the home screen by tapping on the title bar. This is a useful feature but there’s no affordance to explain it to them. Perhaps the app instead should let people “level-up” by introducing them to the feature after they see its need (after a long browse path, for exmaple).
• Explore multi-touch gestures in your apps. We need to move things forward as conventions don’t exist. Multi-touch gestures allow us to play more than use applications.
• We are waiting for conventions to emerge but no one is showing leadership. We need to experiment and share what we learn. This will help us move things forward. We need to help each other through this exciting time.

In her Our Best Practices Are Killing Us presentation at An Event Apart in Atlanta GA, Nicole Sullivan walked through common CSS best practices that have outlived their usefulness and what we can do instead to improve CSS performance and maintenance long term. Here's my notes from her talk:

• Performance is an important part of the Web experience, with poor performance people engage less, use the site less, etc. CSS on many sites is responsible for poor performance.
• Facebook had 706 CSS files, they declared the Facebook blue color 261 times, used 548 unique hex values for colors, had 6498 declarations of color. Salesforce.com had 3,668 padding declarations. Lots of padding declarations are a sign of people tweaking details a lot.
• You can use GREP, regular expressions to analyze CSS files to find matches like this.
• Looking at the Alexa top 1,000 sites revealed some interesting data. One site had 518 declarations of !important. One had 733 declared float elements. Too many floats means you don't have an effective grid system. One had 889 font-size declarations. All this makes it hard for a new or existing developer to work with the CSS code. This is a Web-wide problem.
• Even though we think each project will be "different", our existing best practices mean these problems keep coming up.
• It's time to rethink our best practices and do things differently. CSS will allow us to do anything no matter how stupid. But just because we can doesn't mean we should.

• Myth: pixel based sites are bad. Why did we stop using pixels for layout? Internet Explorer 6 wouldn't allow fonts to be resized when specced in pixels. As a result, we had to use percentages and ems.
• Today browsers use page zoom and resize everything (pixels, ems, and percentages) on the page (IE 7+). So fonts declared in pixels can be resized.
• Nested percentages and ems are not predictable.
• Pixel based fonts can be resized on all modern browsers with page zoom. Check how many users are still on IE6.
• If you must use percentages/ems, only change font-size on the body and leaf nodes, nowhere in between.

• Myth: don't add any extra mark-up.
• A predictable box structure allows you to debug more easily. A module body plays an important role: Trapping margin collapse, Trapping floats, Creating a new formatting context.
• When you cross lines between elements solving different problems you have problems.
• Separation of concerns: process of separating a computer program into distinct features that overlap in functionality as little as possible.
• Solve one problem at a time (isolate into mark-up) but add mark-up judiciously. Don't go nuts with extra HTML but know that bugs can come up when you try to have modules do too much.

• Myth: more semantic the better.
• Class names and IDs are not read by search engines, accessibility devices, or users (except other developers). So let's make sure that our class names & IDs work for other developers.
• Very semantic class names can prevent re-use. More semantic is not always better.
• CSS can be too tightly coupled to content. Repeatable patterns are likely better for CSS maintenance and performance. DRY: don't repeat yourself. In CSS, more is not better.
• Find common elements and presentation, and abstract them out into separate code. Look at what things are known and common amongst a set of modules and what differs.
• A new formatting context says "I'm a box, nothing comes out of me." This is very useful for managing floats and varying content.
• Facebook reduced file size by finding a common abstraction for all the items in their news feed: cut average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).
• This is great for performance but the savings in work and maintenance can be more important. Repetition, Duplication, and Legacy Code make it really hard to work on Web sites. It can snowball out of control.
• Find a middle ground with abstracted styles and semantic enhancements where they are applicable.
• Choose good semantic elements: headings, lists, paragraphs
• The CSS shouldn’t be tightly coupled with the display or with the content.

• Myth: Some people believe IDs are better than classes but they can be overly specific but specificity is much more dangerous for duplication than extra classes.
• Specificity can be limiting for re-use. When we use descendent selectors, specificity can get complex quickly. Specificity grows over time and it becomes difficult to know which rules will take precedence.
• The order of classes does not guarantee which one will be applied first. The last property value pair in a CSS declaration is the one that applies. The order of style sheets also matters. The last style sheet wins.
• CSS inheritance: properties are inherited by child elements. For example, paragraphs inherit the font-size of the body.
• IDs win over classes. Inline styles win over external style sheets. !important wins even over inline styles.
• A hostile work environment can develop when it's too difficult to tell which styles will take precedence. The only way you can code is with Firebug and eventually it becomes impossible to get the look and feel you want.
• We want semantically styled elements but styled the way we need.
• Separate visual semantics from element semantics.
• Classes are far more flexible & reusable
• Keep specificity low: avoid ID, inline and !important when styling elements.
• Avoid the descendent selector
• Add classes to the element you wish to change rather than a parent node.
• Great developers can create great things is we move our worst best practices out of the way. CSS is fine but we've been trying too hard to follow practices that lead us into painful maintenance situations and overly complex code.

In his The Future of CSS talk at An Event Apart in Atlanta, GA 2012 Eric Meyer shared the what new CSS specifications are under development, partially available, and can be used today. Here are my notes from his talk:

Browser makers implement lots of CSS specs out but when you try to use them, you often can’t. Between 2000 and 2010 not a lot happened with the CSS spec. Today there are lots of new modules in active development.

• Animations are not ready for use just yet. Only Webkit supported animations until recently. The syntax in use now may be invalidated in the next few months or years
• Multicolumn allows you to set gutter width, border rules, and much more. This is the layout system we’ve been wanting for years. But it’s only supported in Internet Explorer 10. So it can’t really be used now.
• The first implementation of any spec in a browser is not going to be bug-free. It’s up to us to find and report this bugs.
• Exclusions allow you to define elements that can be wrapped around. You can even set which alpha color the exclusion uses to wrap text around a transparent image border. You can also set specific shapes for the exclusion that are not the shape of the image you are wrapping around. This is not just limited to images. You can exclude any element.
• Regions allow you to set text to flow between blocks across a layout. With regions you need to separate structure and layout as regions are marked-up separately from content. Adobe showed this working along with their spec.
• Masks, text-stroke, and box-reflection are in Webkit only. It’s unlikely these are going to move beyond Webkit as the CSS working group has other specs for handling this like CSS filters.

• Flexible boxes allow you to use table layout without tables. This has been implemented in several browsers but the syntax in the spec is changing to the new version now under development. It can still be used but only if you really need it.
• Paged Media gives you the ability to manage content in page-level elements like page numbers or other “boundary” elements traditionally on a printed page.
• Hyphenation can be used in code now, it just hasn’t been implemented anywhere yet. There are some Javascript polyfills that can make it work as specced.
• A Javascript poyfill adds support. It fills in the cracks.
• Gradients are usable but there are very different ways of marking them up in Gecko and Webkit. Neither of these was great so the CSS working group came up with yet another syntax. They currently recommend not using gradients until things settle down.
• Border-image lets you set an image to define sprites used across the various parts of a border. Supported in a number of browsers, use it if you really need it.

• There are some things we can do now (supported in modern browsers). Transforms are an example: they are widely supported and often used for enhancement.
• Transitions can also be used now. They are event driven (by user or Javascript) and also can be thought of as enhancements.
• Border-radius and Web-fonts can also be used now.

• You can help push forward new CSS specs.
• Do science. Experiment to see what you can do using early versions of a spec. This is how we find really cool new effects and locate new bugs.
• The working group has some public channels where they ask for feedback on specs: mailing list and css3info site.
• You can also join the W3C as an organization or start-up. Start-ups have a reduced membership fee.
• Blog: write about what you find, what you can’t do yet, what you want to do. Having conversations about this helps push the specs forward. Often times just documenting problems helps get things fixed. A use case and a specific example is usually most helpful.
• These standards get built with the help of the community.

In his Rolling Up Our Responsive Sleeves talk at An Event Apart in Atlanta, GA 2012 Ethan Marcotte walked through ways to tackle thorny issues in responsive design layouts, media, advertising, and more. Here are my notes from his talk:

• “Chaos was the law of nature, order was the dream of man.” –Henry Adams. This quote neatly summarizes how a shift in perspective can leave you unprepared for a new world.
• On a daily basis Web designers are asked to deal with an increasing number of diverse devices. Mobile & tablet don’t even begin to describe the situation. People are using multiple devices throughout the day. These devices are interconnected and used together.
• Where do you begin to turn this pile of chaos into something orderly? Into a system.
• Responsive design is: flexible, fluid grids & media, plus media queries that adapt to different devices. Many amazing solutions have been created using these small and relatively simple elements.
• Solve the parts not the problem. Roll up your sleeves and start breaking things down into more accessible, smaller elements.

• Every responsive design has a flexible or fluid foundation. The formula for this is target /context = result. This gives you a percentage based result you can use in your stylesheets.
• Media queries set breakpoints that adjust content appropriately for various viewports. This provides new opportunities for design.
• If you have a legacy site, scaling down your site with media queries can help adjust layouts but there are problems with this approach.
• Starting from the outside and working in seems like a good technique when you start with responsive design. But we should really do the opposite: start from the barebones capabilities of small mobile devices first.
• We should treat layout as an enhancement. Assume your first media query is the absence of a media query.
• Shearing layers: every building is aging at different levels. The levels are: site, structure, skin, services, space plan, and stuff. The lower the level the harder it is to make changes.
• Trade the control you have in Photoshop for the control you get for managing your content across devices using responsive design.
• When evaluating content: width, hierarchy, density, and interaction. Width: how to flex to various widths? Hierarchy: which modules show up where? In what order? Density: how much detail do you show at any point? Interaction: how does it change as browser window changes shape (like a menu changing into a single click action)?

• Simplify before you suppress content. Simply hiding elements because they don’t fit is problematic. You need to have a discussion on what’s critical and what isn’t.
• Lead with content over navigation. The site Contents Magazine positions the navigation out of the footer into the header when screen size increases.
• Design your source order more intelligently. Start with basic defaults for the simplest screens.
• Width, hierarchy, density, and interaction helps you understand where to place elements and content.
• Design grids from the smallest element up. This allows you to move away from breakpoints connected to devices and instead focus on breakpoints connected to your content.

• Ads are fixed width on the Web. This is obviously problematic on mobile devices and especially in fluid layouts.
• Ads are traditionally sold based on size and position on a page. Following their responsive design, The Boston Globe sold ads based on how they are promoted on the page instead.
• Ads are often added to pages using document.write which slows down the page and affect re-positioning.
• Boston Globe put empty DIVs on the page where ads will go and turned them on or off at different resolution breakpoints. Javascript looped the page looking for open ad slots and wrote ads in when the page was resized.
• Layout is the easy part. Rich ads, takeovers, and more are just assumed to work –no progressive enhancement in most ad systems.
• Custom solutions might have to be created until larger systems catch up with the diversity of devices.
• We need to start asking for change and making things happen.

• Setting max-width 100% means an image will never exceed the size of its containing element. You can also apply this rule to other forms of embedded media like videos.
• But videos don’t scale proportionally. They need a width and height set in HTML.
• One way to get videos to work responsively is to use Javascript to resize videos with an intrinsic ratio.
• To create a ratio-aware video box we need to set a ghost box around a video with flexible padding. Then we can absolutely position a video inside the box. This is a CSS only solution but it does require a bit of extra mark-up.
• Bandwidth and performance are important axis to consider in responsive Web designs. This especially important for images.
• Responsive images (from Scott Jehl) is a Javascript solution that replaces small screen images with larger ones when appropriate. It was great until it broke when browsers started downloading images early to render pages faster.
• Content negotiation techniques may be needed to manage image differences but is there an answer that uses less code?
• A way around the bandwidth problem may be to offer users control over their experience. With all the complexity, maybe we can acknowledge our limits and ask for our users help.
• The web is inherently messy, maybe it’s ok that we can’t solve some problems.

In her presentation at An Event Apart in Atlanta GA 2012 Karen McGrane discussed the need for structured content in Web sites. Here's my notes from her talk on Adapting Ourselves to Adaptive Web Content:

• Typical client request: we need visual consistency across all experiences so we need a redesign.
• But it’s often better to a step back from the need to have a redesign and instead focus on your content delivery system. Most people are very hesitant to touch their CMS. “Our CMS is hard to use.”
• We have people all over the organization who are responsible for creating content. They don’t always report to the same person. They don’t share all the same values. So we face organizational challenges for content management.
• Mobile and social terrify organizations. They don’t know what to do but know they need to do something.
• Everything is fragmented: CMS tools, internal processes, and devices + platforms.
• This is our chance to start managing things differently so our content will adapt to the future.
• We can’t afford to be writing content for any one platform. Instead we need structured content to work everywhere.

• Conde Nast: created tablet apps for a number of their magazine titles. They went back to their roots of design & articles: to doing what they’ve always done just for different devices. Art and production staffers make two layouts for iPad edition (landscape & portrait) in addition to print layout. But the iPad apps have seen consistent declines in sales. They only sell in the tens of thousands compared to hundreds of thousands in print.
• NPR: created an API that allows anyone to access and display structured content on different platforms. The API makes it possible to separate content from presentation and allows for re-use. All different devices can talk to API in clean structured way. NPR has seen an increase in page views of 80%. Mostly attributable to mobile use (new experiences built on the API).
• The future of adaptive content is having a clean base of structure to work with. This allows you to make the right decisions for each platform.
• Why are news organizations the innovators? They know how to build systems with good structure: headline, deck, lead, nutshell paragraph, etc. This is engrained in their culture & they are taught how to work this way.
• The future of adaptive content is pretty old. People have been talking about structured content for years. What’s stopping us?

• It is hard for organizations to set away from tight coupling of content and presentation.
• People are still thinking about how to write for print. They start with thinking about print, then how to shove that into a Web site, then how to shove that into a mobile device.
• All their processes, organizations, structures, and modes of behavior are focused on print. They have generations of history and workflows influencing their decisions.
• Thinking about where content will "live" on a web page is pretty 1999. Yet this is what a lot of Web CMSs do.
• One well-structured flexible reusable set of content that can be published to many places. This isn't writing for one medium and shifting it to others. We need to write platform-agnostic content.
• Everyone thinks content and form are married together. Web standards has made great strides toward separating content and structures.
• We have CMS that are vertically tied to specific display and delivery. As a result, we need to go deeper into the stack.
• This is not a technology problem. It’s a strategy problem. We need to explain to people how these systems will work and why they should care. Share "why" before you decide "what" you have to do.

• A reusable content store gives you options for different displays and formats. Think about different sizes of content that are appropriate for different uses. We need meaningful metadata and to write our content for reuse.
• TV Guide's value did not end up being an single format (magazine). It ended up being their database of structured content.
• Write for the chunk, not for the page. Truncation is not a content strategy. Don’t just chop content off to make it fit onto small screens. There is a war between blobs and chunks. We can’t let the blobs win.
• Demystify metadata. Metadata allows us to programmatically assemble content in appropriate ways (for different devices, etc.)
• Metadata helps prioritize content and eventually personalize it. But you need human judgment to decide what actually matters. Automated pages are not smart enough on their own but they can do a lot of the heavy lifting.
• Metadata is what will help us deliver on the dream of personalized content. We currently treat every user the same -they all get the same content.
• Better CMS workflow. Content administrators hate the input fields in content management systems but they are just a symptom of bad workflow. We have to stop making checklists for deciding on CMSs. We need to look at the workflows for content creators instead.
• If you have a bad author experience in your CMS, you will never have a great user experience in your product. Editors hate structured systems because the interface is often so poorly developed.
• Companies rarely analyze their CMS systems deeply but they focus on every detail of key funnels like e-commerce checkout. For a content company, CMS systems are just as important. Better content and better CMS equals better business value.
• We have editors that are so fed up with their CMS system, all they want is a big open blob in a WYSIWYG editor. This is great for only one platform. It sucks for many platforms.
• We need to make sure the workflow is streamlined, the system is usable, and creating structured content is easy. A prettier font and better tabs are all great. But we need to look at the design of the workflow. Apply the same principles and techniques we use to design Websites to design our CMS systems.
• Use mobile as a wedge. We have a huge opportunity to take a step back and figure how content publishing practices can be rethought to set ourselves up for future success. This will allow us to make it onto new platforms.
• The more structure you put into content, the freer it will become.
• We have to separate content from display (for real this time).
• We need to capture content in a clean, presentation-independent way.
• We need ongoing conversations about structured content.

In her Hacking Your Users’ Brains talk at An Event Apart in Atlanta, GA 2012 Aviva Rosenstein outlined how visual perception and customer research can help manage user expectations in your software applications. Here's my notes from her talk:

• Brain hack: an exploit based on how users perceive and/or understand information.
• Get inside the heads of your users so you can make websites more usable. Focus on perception and comprehension: how do people see and make sense of a visual interface. Understanding visual perception can help you see through your user’s eyes.
• What are people’s needs and goals and how do you meet their expectations? User research can help you understand their needs, recognize their pain, speak their language, and help them succeed.

• People see similar visual treatments and group them. Our brains are wired to make associations based on how similar or close to each other things are visually.
• If you move an action button too far away from the element it is associated with, it takes people a while to make the connection.
• Proximity & similarity also apply to text (not just visual elements). Separating text can separate messages. Different fonts indicate different elements.
• Negative space & grouping can help manage where people’s eyes stop when looking at a composition or an application interface.
• Different font treatments help people distinguish different elements in an interface.
• Don’t use color as the only way to communicate information. Always pair it with something else. This helps people with color blindness issues.
• Noticing movement is an evolutionary enhancement that helped us survive in the world. However online, animation is often used to draw our attention to distractions (ads, promotions) instead of to content.
• Depth can also communicate the wrong information. Exmaple: tilted pie graphs. Our brains have a tough time with spatial relationships. First we have to create a mental model of the object, then we have to rotate it, and finally make sense of it.
• We can train people where or where not to look on a Web page. Through years of colorful banner ads at the top of pages, we’ve trained people not to look in colorful headers.
• Presbyopia: elderly vision. To switch between near & far vision, the lens in your eye needs to change shape. As you get older it gets harder for that lens to flex. This means older people need bigger fonts to read.
• People read faster when lines are longer but most people will say they prefer shorter line lengths even though they read them slower.
• We’re hard-wired to look at faces. If you put faces on your Web sites, they’ll attract attention.
• We’ve conditioned people over time to associate meaning with symbols. If you aren’t consistent with your use of these symbols, you can slow people down as they won’t know what to expect from common controls.
• There are cultural differences with hand symbols so tread carefully when using them in your designs.

• It’s not a matter of asking people what they want. It’s a matter of finding out why they need something. Get to the underlying motivation.
• Learn how to ask the next question and listen to answers.
• It doesn’t take a lot of time to test your basic assumptions about a problem you think people have. This is worth doing so you don’t go down the wrong path.
• Different types of users have different assumptions. Don’t assume you are representative of your user base.
• Find out: what do users need & want? What do they do now? How do they feel about it? What can you improve?
• Just two days are often enough to get answers to some of these key questions.
• First define your target audience, then find them and get to know them. You need to get people to talk with you. Rewards can help motivate people to help.

• Asking questions is a good start but it’s not enough. Human recall about behavior is not great. We often forget or over report behaviors that make us look good –even in anonymous surveys.
• What people say they do and what they do are two different things. Questions can gather information about opinions but not behaviors.
• To learn about actual behaviors, you have to go where your customers are and observe them.
• Environments can highlight what roles people play (that are relevant to your site or service), how information moves between roles, what goals they have for each task, the context they work under (space, timing, etc.), and what they need from you to reach their goals.
• Pain: find out what hurts the most when people are trying to achieve goals. People get blinders on when they’ve been doing some thing the same way over and over.
• Be prepared to learn. Assume your customers are the experts, not you. Blend in, shut up, and listen.
• Sort through all your notes by putting each insight on a separate post-it. Put them on a wall and work together to analyze what you’ve observed.
• How people expect content to be organized is important if you want people to find things on your site. You can use closed or open sorts to have customers help you organize things.
• Use interviews to explore needs/feelings, elicit opinions/rationale, get concept feedback, or validate assumptions.
• You can use quick tests to see if users can navigate your site, if they find it easy to accomplish goals. It’s your job to find issues. Be careful not to lead people.

In his Handcrafted Patterns talk at An Event Apart in Atlanta, GA 2012 Dan Cederholm shared his recent experiences and insights about design patterns, the SASS CSS framework, and adaptive designs. Here's my notes from his talk:

• There’s a common progression to learning anything creative: imitation, repetition, and finally innovation. Imitation: by doing what others have done. Repetition: learning and repeating patterns. At a certain point, muscle memory kicks in and you can use patterns without thinking. Innovation: apply your own creativity to the things you’ve learned. This adds your own style to things.
• Web design is no different. Ee learn by imitating, repeating, and then finding our own style.
• Being a Web designer/front-end developer was a lot easier in 2002 than it is in 2012. There are lots of new things to keep up with –it can be overwhelming. Repetition: building and reusing patterns. Patterns can help you learn.
• Even Web sites that appear different from each other have more in common than not. Regardless of the visual design of a site, there are common patterns underneath it.
• A good craftsperson builds their own tools so Dan has created a CSS and HTML pattern library called Pears that allows him to break things down into pieces and build up from there.
• Solve small problems. Incremental improvements can happen when you look at things in small pieces. Patterns help you do that.

• Placeholder text: when you have a label or hint in an input field it goes away. Traditionally we used Javascript to make this work but there were problems. Now HTML5 has an attribute that can be enabled through a Javascript polyfill on all browsers.
• ARIA is a technical spec for improving usability for Web applications. You can use the role attribute to designate landmarks on a page. Accessibility software can use these roles instead of IDs to identify things.
• You can use CSS selectors where you used to use CSS classes. Use selectors like last-child to handle last elements in rows or lists. Or nth-child(even) to alternate styles in lists.
• If you are using CSS selectors to affect layout, you actually do want to be careful of the browsers you support. Otherwise, it’s a nice enhancement.
• Slat pattern: thumbnail, title, and description in a row. These are everywhere on the Web. Typically these are teasers to other pieces of content.
• In HTML5, you can wrap an anchor tag around all the elements in a slat, img, h3, and p. This turns the whole element into a link.

• SASS is a meta-language on top of CSS that adds more structure and power to document styling. LESS is similar to SASS. They essentially do the same thing.
• Dan was reluctant to start using SASS because he usually created CSS files himself by hand and handed them over to clients. But it’s a different world when you are maintaining CSS for a large site. SASS can help a lot there.
• CSS doesn’t support macros, variables, constants, and conditionals because it’s intended to be approachable by as many people as possible.
• Dribbble converted an existing 6,000 line CSS file to SASS. Every valid CSS file is a valid SCSS file. It’s very easy to get going. Just create a SAS file, then set up a watch to have the file update.
• In SASS: variables can be used to set up common CSS styles. You can also use darken & lighten functions to adjust colors in a single palette.
• Mixins allow you to write a set of declarations once and reuse them across your stylesheets.
• Inline media queries can be used to nest adjustments inside CSS declarations inside of in separate files or parts of the stylesheet.

• Pea.rs is a responsive design that allows you to see how individual components work in various layouts.
• Many companies can’t throw out what they have and start over to build a responsive design.
• Dribbble adapted their layout using CSS media queries instead of starting from scratch. They allowed content to dictate what the breakpoints in the design should be instead of device widths.
• When adapting layouts, try to avoid just hiding elements. It’s better to rearrange elements instead.
• Embrace patterns: it’s not cheating. It’s a way of breaking down problems into smaller, solvable bits.
• DIY frameworks: creating your own framework is a great learning experience

In her Inclusive Design: It’s In the Details talk at An Event Apart in Atlanta, GA 2012 Cindy Li discussed the need to make our Web experiences and apps more accessible. Here's my notes from her talK:

• Inclusive design is a way to make products work for a wide range of people. Think about hosting a party that makes everyone comfortable. This is different way of thinking about accessibility.
• Dieter Rams: the only cardinal sin is design is being indifferent to people & the reality in which they live.
• Talk to your friends and family to learn about how they perceive and use the products you work on. You’ll find a variety of needs that highlight how people are different.
• Part of being a good host is putting yourself in your guest’s shoes: what are they thinking/feeling?
• 1 in 5 people will have a disability in their lives. Many of these are temporary. 6.8 million people have fractured a bone in the US. 6 million pregnancies per year in US. Consider that we’ll all be faced with a disability at some point in our lives. Plan ahead in your designs.
• 1 in 100 men have red-green color blindness. There’s ways to test your designs to make sure they still work for these users.

• If you’ve taken the time to think through your words or hired a writer, make sure your words are legible: right size, color, placement.
• Be mindful of type that’s too closely related to background color. Make sure there’s an appropriate amount of contrast in your designs.
• Use a well thought-out visual hierarchy to ensure each element has the appropriate amount of contrast on the page.
• CAPTCHAs stop humans as effectively as they stop machines. Ensure there’s an escape route for people (load another, audio playback).
• Touch devices need large targets for fingers. Test your designs in context on actual devices.
• Consistency: having a common style can help make things more understandable. Don’t use lots of different styles for primary actions.

• Color contrast analyzer: can enter foreground & background color to see if it passes accessibility tests.
• Color oracle: allows you to see how color blind people see your sites.
• Universal Access controls on OSX: can use voice over, zooming, and display adjustments.
• iPhone Accessibility: voice over, zoom, text sizes, and more. Can be applied to all apps & the operating system
• Translate with Google & Bing: can make foreign languages more accessible when done inline.
• Keyboard shortcuts: use shift+? To bring up keyboard shortcut options on your website. If you enter this shortcut, a menu comes up that displays what keyboard actions are available.

In his opening keynote at An Event Apart in Atlanta, GA 2012 Jeffrey Zeldman talked about the need to keep content front and center in Web sites and the Web design process. Here's my notes from his talk on Content First:

• The web is a series of contextual content encounters.
• Content is really a design problem. Yet the sites we design are often hostile to content. They don’t think about contingencies or how content creates an overall user experience.
• Only thinking of the content on your site as brochure doesn't prepare you for inevitable changes.
• Many of our Web sites are hostile to content. Content is often subservient to related links, SEO content, navigation systems, and more.
• Web pages can't look the same in every browser. Users are in charge of how they view the Web: form the browser they use, to font settings, etc. But now they have even more control.
• Before mobile devices, we had all the leisure time we needed to analyze all the links on a page.
• It’s not just the visual experience that you might not be able to control. If we don’t design to be friendly to content, our users will find a way to make the content friendly anyway. Through tools like Instapaper and Readability, people are time and design shifting to experience your content the way they want. This is the evolution of readers taking control over their reading experience.
• If your design doesn't give user the content they need, they'll find other ways to get to it.
• This is how the Web works anyway. But we’ve all believed we had control by creating illusions of which browsers and screen sizes our users had. This is a "consensual hallucination" among Web designers. We've never really had control.
• Designers are advocates for the user. We're customer service representatives for our organizations. Everyone impacts user experience, which means everyone is responsible to customers.
• Design that does not serve people does not serve business. When you do things that are anti-user, you are designing anti-user patterns. Example: services that spam your address book without you knowing it.
• Design that is hostile to users is also hostile to business (esp. in the long term). You don’t want to be the company known for tricking users.
• If you create designs that trick the user, you're not doing right for the business. Anti-user practices come back to bite you.
• When things negatively impact the business, business owner pay attention.

• Design without content is decoration. It used to be that you worked on look and feel before you thought about content. But it’s actually very hard to do design without content.
• It’s important to have a style that is appropriate but hard to develop that style without an understanding of content.
• When the Blogger team asked for design templates, it was really difficult to create anything appropriate devoid of content. Doug Bowman made a universal template that was minimalist and ended up on 20 million blogs. It was the best solution for the problem of designing where you don’t know the content. But it’s one of the only success solutions to this problem out there, which illustrates how hard it is to design without content.
• A design that understands and supports content is always going to be better.

• Progressive enhancement is a universal smart default. Most of agree that it’s a best practice to create an experience that can reach everyone.
• Responsive design is progressive enhancement taken to the next level for the Web we have now (many devices, many different ways to interact with content). Layouts that adapt themselves to devices can be implemented in many ways. Fluid grids, flexible media, and media queries are just one way to implement the idea.
• Responsive sites react to the needs of the user through screen size and other contingencies.
• Responsive design is a small screen design vs. a mobile strategy. You may only need a small screen strategy for your site.
• Great mobile thinking takes into account the special things you can do on a mobile device.
• Small screen and limited utility force us to put user needs first.
• When doing responsive design its important to think about mobile first. Work out content, usability, and what is most important on mobile, then go out to the desktop. "What are the three things that have to be on the page?"
• Mobile first =user first = content first. This is the way all our Web sites should be made. Thinking mobile first forces you to only keep what matters in our sites.
• Mobile is ushering in Web standards and usability in places they never succeeded before due to the rise of mobile WebKit (and IE9) browsers.
• Users and clients now know that Web sites don't have to look the same in every browser. Mobile devices are driving this perception.
• The way we put our Web sites together is kind of backwards. We can steer our clients and bosses to more rational ways of working.
• Before any design work happens, a committee of stakeholders usually writes up a set of feature requests for the site. Sometimes this leads to turf battles.
• After all these things are done, then a design team is typically brought in (after all these decisions have been made). Usually this is too late.
• Instead start with the content. Go through the exercise of understanding what content & tasks your site needs before making any templates or designs.
• Instead of making designers react to CMS. Make CMS systems that react to designers.
• Everyone should start with an experience and content strategy not a turf battle over features.

Amazon is making a big push into digital content on the back of Kindle e-readers and tablets. If this holiday season is any indication, their strategy is paying off. Here's the latest numbers.

• The share of adults in the United States who own e-book readers jumped from 10% to 19% between mid-December and early January. (source)
• Amazon sold more than one million Kindles a week in December. In total Kindle device sales tripled over the holidays. (source)
• Since its introduction 13 weeks ago, the Kindle Fire has become the best-selling, most-gifted and most-wished-for product on Amazon. (source)
• The Kindle Fire overtook the Galaxy Tab in application sessions among all Android tablets within a few months. Kindle Fire represents 35.7% of sessions and Galaxy Tab represents 35.6%. (source
• Gifting of Kindle books was up 175 percent between this Black Friday and Christmas Day compared to the same period in 2010 and Christmas Day was the biggest day ever for Kindle book downloads. (source)
• Amazon's Kindle Lending Library now has over 75,000 books that Amazon Prime members who own a kindle can borrow once a month, with no due dates. As of November, the Kindle Lending Library only had around 5,000 books. (source)
• The #1 and #4 best-selling Kindle books released in 2011 were both published independently by their authors using Kindle Direct Publishing. (source)

Despite being nearly ubiquitous online, username and password login screens are wrought with usability and security issues. Here's a small sample of how bad things are.

• The average person has between 7 and 25 accounts that they log into every day. (source)
• People report authenticating about 15 times in a typical work day on average. (source)
• 86% of U.S. companies use password authentication. (source)
• 70% of people do not use a unique password for each Web site. (source)
• Around 82% of people have forgotten a password used on a Web site. (source)
• 4.28% of Yahoo users forgot their passwords over a three month period. (source)
• Password recovery is the number one request to help desks for intranets that don’t have single sign-on portal capabilities. (source)
• The top 5 passwords at Gawker (based on released records) accounted for roughly 1 in 4 passwords. The top password, 123456, came in at over 3,000 uses within the dataset of 188,279. (source)
• A survey of 34,000 MySpace passwords revealed that the most common were "password1", "abc123", "myspace1", and "password". (source)

Despite being nearly ubiquitous online, username and password login screens are wrought with usability and security issues. Here's a small sample of how bad things are.

• The average person has between 7 and 25 accounts that they log into every day. (source)
• People report authenticating about 15 times in a typical work day on average. (source)
• 86% of U.S. companies use password authentication. (source)
• 70% of people do not use a unique password for each Web site. (source)
• Around 82% of people have forgotten a password used on a Web site. (source)
• 4.28% of Yahoo users forgot their passwords over a three month period. (source)
• Password recovery is the number one request to help desks for intranets that don’t have single sign-on portal capabilities. (source)
• The top 5 passwords at Gawker (based on released records) accounted for roughly 1 in 4 passwords. The top password, 123456, came in at over 3,000 uses within the dataset of 188,279. (source)
• A survey of 34,000 MySpace passwords revealed that the most common were "password1", "abc123", "myspace1", and "password". (source)

I recently updated my article on Device Classes & Responsive Design for Facebook's HTML5 resource center, which is designed to help developers reach people on desktops, smartphones and tablets using web standards. Check it out on Facebook.

While the task of designing Web applications and sites for multiple devices can be daunting, two techniques can make the process more manageable: classifying device experiences and designing/building responsively. Here’s how these two approaches can work together to optimize interface designs across a wide range of connected devices. Read More...

At Apple's October 2011 iPhone launch, CEO Tim Cook shared updated market and sales numbers. Back then Apple had sold 250 million iOS devices. Here's what the story looks like today.

• A total of 315M iOS devices have been sold. (source)
• 85M of these devices are using the iCloud service Apple rolled out last year. (source)
• In the fourth quarter of 2011, Apple sold 37.04M iPhones, 15.4M iPads, 5.43M iPods, 1.4M Apple TVs, and 5.2M Macs. (source)
• iPod Touches made up over half of iPod sales this quarter. (source)
• Over 600,000 copies of iBooks Author have been downloaded since it was announced last week. 3 million copies of iTunes U have been downloaded. (source)
• There were 140M downloads from iTunes on Dec 25. (source)
• By February, iOS developers will have earned over 4 billion dollars in total sales. (source)
• Apple retail stores are seeing an average of 22,000 customers, per store, per week. (source)

At Apple's October 2011 iPhone launch, CEO Tim Cook shared updated market and sales numbers. Back then Apple had sold 250 million iOS devices. Here's what the story looks like today.

• A total of 315M iOS devices have been sold. (source)
• 85M of these devices are using the iCloud service Apple rolled out last year. (source)
• In the fourth quarter of 2011, Apple sold 37.04M iPhones, 15.4M iPads, 5.43M iPods, 1.4M Apple TVs, and 5.2M Macs. (source)
• iPod Touches made up over half of iPod sales this quarter. (source)
• Over 600,000 copies of iBooks Author have been downloaded since it was announced last week. 3 million copies of iTunes U have been downloaded. (source)
• There were 140M downloads from iTunes on Dec 25. (source)
• By February, iOS developers will have earned over 4 billion dollars in total sales. (source)
• Apple retail stores are seeing an average of 22,000 customers, per store, per week. (source)

I recently updated my article on Device Classes & Responsive Design for Facebook's HTML5 resource center, which is designed to help developers reach people on desktops, smartphones and tablets using web standards. Check it out on Facebook.

While the task of designing Web applications and sites for multiple devices can be daunting, two techniques can make the process more manageable: classifying device experiences and designing/building responsively. Here’s how these two approaches can work together to optimize interface designs across a wide range of connected devices. Read More...

At Apple's October 2011 iPhone launch, CEO Tim Cook shared updated market and sales numbers. Back then Apple had sold 250 million iOS devices. Here's what the story looks like today.

• A total of 315M iOS devices have been sold. (source)
• 85M of these devices are using the iCloud service Apple rolled out last year. (source)
• In the fourth quarter of 2011, Apple sold 37.04M iPhones, 5.43M iPads, 15.4M iPods, 1.4M Apple TVs, and 5.2M Macs. (source)
• iPod Touches made up over half of iPod sales this quarter. (source)
• Over 600,000 copies of iBooks Author have been downloaded since it was announced last week. 3 million copies of iTunes U have been downloaded. (source)
• There were 140M downloads from iTunes on Dec 25. (source)
• By February, iOS developers will have earned over 4 billion dollars in total sales. (source)
• Apple retail stores are seeing an average of 22,000 customers, per store, per week. (source)

Google's Android operating system is seeing 700,000 activations a day. Despite this meteoric growth, Apple's iPhone has been gaining on Android in recent smartphone sales in the United States.

• According to the NPD Group, Apple's iOS moved up to 43% of U.S. smartphone sales in October and November, compared with 26% in the third quarter. Meanwhile, Android’s share of U.S. smartphone sales dropped from a high of 60% in the third quarter to 47% in October and November. NPD data comes from large online surveys weighted to match US demographics and asks recent smartphone buyers what they bought. (source).
• NPD said that Apple held the top three spots in device sales with the iPhone 4S, iPhone 4 and iPhone 3GS. (source).
• According to Nielsen, Apple's iOS rose to 46.9% of new U.S. smartphone sales in December up from 25.1% in October. Android's share fell from 61.6% in October to 46.9% in December. Nielsen's data comes from U.S. surveys of recent mobile device acquirers. (source)
• According to Nielsen, the launch of Apple’s iPhone 4S had an enormous impact. 57% of new iPhone owners surveyed in December said they got an iPhone 4S. (source)

Google's Android operating system is seeing 700,000 activations a day. Despite this meteoric growth, Apple's iPhone has been gaining on Android in recent smartphone sales in the United States.

• According to the NPD Group, Apple's iOS moved up to 43% of U.S. smartphone sales in October and November, compared with 26% in the third quarter. Meanwhile, Android’s share of U.S. smartphone sales dropped from a high of 60% in the third quarter to 47% in October and November. NPD data comes from large online surveys weighted to match US demographics and asks recent smartphone buyers what they bought. (source).
• NPD said that Apple held the top three spots in device sales with the iPhone 4S, iPhone 4 and iPhone 3GS. (source).
• According to Nielsen, Apple's iOS rose to 46.9% of new U.S. smartphone sales in December up from 25.1% in October. Android's share fell from 61.6% in October to 46.9% in December. Nielsen's data comes from U.S. surveys of recent mobile device acquirers. (source)
• According to Nielsen, the launch of Apple’s iPhone 4S had an enormous impact. 57% of new iPhone owners surveyed in December said they got an iPhone 4S. (source)