An Event Apart – It really is and so much more

Jeffrey Zeldman
Co-founder of An Event Apart /
Executive Creative Director of Happy Cog

Web 2.1: The Medium Comes of Age

• iPhone/Android/Smartphone devices have come at the right moment when HTML5/CSS3 are ready for action
• Web 2.0 = user generated content
• Many to many = blogs, wikis, etc.
• Devices that connect us to the web: desktops are doubling everyday & mobile devices are 8x that and growing exponentially
• HTML5/CSS3 standards are here and we can use them now
• The web now is “Informed by UX and powered by web standards”

Whitney Hess
User Experience Consultant

DIY UX: Give Your Users an Upgrade

• User experience basics
• Make people’s lives better
• Design Research
  • What do our users really need?
  • Logging user requests (features, ideas, etc.)
  • Kaizen = “Continuous Improvement”
  • Let users show you their workflow
  • Continuous communication / follow-up with users
  • Capture the user interaction with your site (tools, that record full screen interaction)
  • Usability testing (not user testing)
• Analytics
  • What are our users doing?
  • Understand site cycles – highes/lowes
  • Frequently used/visited
  • Use of heat maps of user interaction
• Experimentation & Iteration
  • How are we getting better?
  • Continuous improvements
  • Experiment and re-iterate in your process to better improve functionality
• Other
  • Use those around you if direct users aren’t accessible for usability testing
  • See and listen to all the faults about the product and use them to make your product / usability better
  • Never stop trying to make things better

Dan Cederholm
Web Designer

The CSS3 Experience

• Learn how advanced CSS/CSS3 can enrich your site
• CSS3 enhances interactivity
• Build the best possible experience through the technology that is available
• Our job is to add to the story and enrich the message
• Progressive enhancement – create for the most basic but enhance to enrich it better
• Critical: Branding, Usability, Accessibility and Layout
• Non-Critical: interaction, visual rewards, movement, etc.
• Take advantage:
  • Hover
  • Opacity Swappting
  • Multiple Backgrounds
  • Transform
  • Rotate
• CSS3 is modular, only use what works now
• Don’t do it for mission critical stuff but do it for the richer experience

Luke Wroblewski
Product Design Leader

Mobile First !

• Currently sites are all build for the desktop first then mobile
• Mobile should be design first
• Three reasons why:
  • Mobile is exploding
  • Mobile causes you to focus
  • Mobile extends your capabilities
• Growth = Opportunity
  • Introduction of powerful smart phones like iPhone
  • Mobile is growing quickly
• Constraints = Focus
  • Understand the constraints that come with mobile – screen resolution & pixel density
  • Compared to desktop versions of the site, you’ll need to slim it down 80% of the content for mobile (large nav, excess desktop only content, etc.)
  • Design mobile for what users want to do
• Capabilities = Innovation
  • Understand the capabilities needed
  • Touch friendly menus
  • Finger interaction with functionality
  • Mobile presents augmented reality, take advantage of location and direction (GPS/Compass capabilities)
  • Video capabilities – product code scanning, image scanning

Kristina Halvorson
Founder/President of Brain Traffic

Message and Medium: Better Content by Design

• Design for multi-channel content delivery (desktop & mobile)
• Will face a set of new considerations & challenges
• Identify key message and then create an affective content strategy that will impact both content development and design
• Content Strategy
  • Plans for creation, delivery and governance:
    • Useful
    • Usable
    • Purposeful
    • Productive
    • Profitable
• Core Strategy
  • Your message isn’t a mission statement, promise or tagline
  • Primary Message
    • Who you are,what you deliver, what I get
    • Needs to be focused and memorable
  • Secondary Message
    • Supports the primary
    • Contextual for the audience
    • Types of information
    • Info on product/services
  • Create a wireframe that structures and recommends proper objective of content used in this section
  • For each page, know the page objective
  • Reflect same language, tone, feel or primary message throughout the site context

Jared Spool
Founder of User Interface Engineering

Anatomy of a Design Decision

• Good/bad design is determined by the designers decision
• 5 Styles of design decisions
  • Unintentional Design
    • design just occurs on its own
  • Self Design
    • design it for yourself and not others
  • Genius Design
    • design based on experience and knowledge to problem solve the design
  • Activity-Focused Design
    • design based on the user activity
    • go beyond prior experiences
    • Innovation occurs when complexities are removed
  • Experience-Focused Design
    • designing for users to have a full experience, while in between activities
    • being pro-active with the design
  • Rule based vs Informed based decisions
    • Rule based
      • prevents thinking
      • inflexible to exceptions
      • It is a dogma / methodology
    • Informed based
      • requires thinking
      • flexible to exceptions
      • It is a technique / trick
• Each design style has its purpose(s)
• A Good designer knows the style they are focused on
• Avoid being sucked into a rule based decision

Eric Meyer
Founder of An Event Apart /
Founder of Complex Spiral Consulting

Everything Old Is New Again

• Using CSS3 to enhance what’s already there and make it even richer
• Some thought to inline styles, when considering the amount of server calls
• Take advantage of CSS3 that are usable now
  • Box sizing- thinking out of the box width
  • Border Radius – making rounded corners
  • Multiple Backgrounds – instead of many nested DIVs to put multiple images together
  • Nth-child – taking advantage of patterns and applying a single style instead of multiple layers

Jeffrey Keith
Web Developer

Paranormal Interactivity

• Interaction is the secret sauce to the web
• Understanding interaction is key to understanding the medium
• Using good old HTML, CSS and Javascript to craft a great experience native to the web
• Understanding the with text, images, will help clarify recognition
• The very basics to web interaction are Links and Forms
  • Links
    • links, lead to information and/or indicate an interaction
    • hover/focus increase the level / richness of interaction
  • Forms
    • Making forms fun and easier to fill out = “Mad Libs”
    • Don’t frequently mad libs the forms the same way, it may cause confusion based on the type of interaction needed
• Use Progressive Enhancement
• Interaction warrants Feedback

Aarron Walter
Lead User Experience Designer

Learning to Love Humans – Emotional Interface Design

• Designing for humans is challenging
• Understand what the user is looking for
• Create a memorable experience that will keep the user devoted
• Human need:
  • Functional, Reliable, Usable, Pleasurable
• Creating a relationship from a private to a public
  • Provide an enrichment that makes the user experience wholesome and valuable
  • ex. Mailchimp’s Chimp – provides a relationship through jokes / provides interaction
• Opening and creating a trust that the user accepts

Andy Clarke
Web Designer

Hardboiled Web Design

• Make the most of modern design tools and browsers
  • What’s holding us back?
    • Misconceptions & Preconceptions
    • We are clinging to safety of when can we use this or that?
    • CSS3 is specs are not all there, but those specs are for the browser developers priorities to be competitive
    • Idea that Progressive Enhancement is the best approach (for the last 7 years)
  • Should be Progressive Enrichment – We should be building for the best of capabilities of the browser then for the older browsers (fall to graceful degradation)
  • Use HTML as base of content, not for the design; this will allow better flexibility with our designs
  • Browser testing?
    • Should we be concerned by the different looks between browsers? No, each browser provides their own enrichment and for older browsers use graceful degradation
    • Standards should be there to inform what we do, but not to constrain what we can do
    • Web geeks no about multiple browsers, but nobody else will care

Ethan Marcotte
Web Designer
/Developer

A Dao of Flexibility

• Sites now and days are accessed by multiple types of devices
• Users deserve quality experience no matter their device (display size)
• Responsive Architecture – reshaping to accommodate the people(s) need
• Flexible Grids – work to proportionally fit the screen size of the site; allows for higher flexibility of the layout when seen on other devices
• Using the formula Target Size/Context Size = Correct Proportional size (use em)
  • Great for fonts and grid widths
• Responsive Design – provide a specific design for certain screen sizes.
  • Better allows change of layout to work with the screen size
  • ex. smaller screens have no sidebar elements instead pushed to the bottom of the content area

Jeff Veen
Founder/CEO of Small Batch, Inc.

How the Web Works

• Fundamental principles that led to the success of the web
  • Consensus = Code
    • faster response to send back for feedback, the faster you can learn
    • “If you’re not embarrassed when you ship your product, you waited too long” – Reid Hoffman
  • Value = Users^2
    • The value of your network is the exponential growth of users
    • The more users using means the more valuable that network is
  • Information = Free
    • Technology now makes it possible to easily copy / but that what allows us to share on the web so easily and quickly
    • The web is like a copying machine
    • Once you made something digital, it is difficult to prevent its duplication. Thus preventing replication and limiting access is impossible and never going away.
    • Find out a way to get something to become free, which will entail to you have a competitive advantage