Angry Dinosaurs

by Cory Ondrejka

• Beware of process theater
• Agility = develop the best thing you can for your customers
• Maximize innovation = maximize experimentation
• Chris Anderson “Free”
• Detect the change that’s occurring outside your organization
  -> who will detect it first?
• Institutional incompetence is accelerating
• Look at your data! Create value and build on it
• Gather more data cheaper and faster
• Communication and learning from each other
• Be ready for your customers to compete with you when you share all of your data
• Getting out of the way: don’t make your data proprietary or inaccessible
• Driving institutional change
  • Hard to be fearless and lead fearlessly
  • Are you bold enough to admit you’re not the best leader?
  • Can you get others to follow?
• Driving transformation
  • Focus on business goals
  • Admit reality
  • Communication
  • Find internal leaders
  • Embrace agility
• How will you keep up in a world of change and Moore’s Law?
  Reality is exponential, not linear
• Failure is a reality but hopefully you will fail fast, cheaply, and publicly
• Institutions should not punish failure, especially if you learned something from it
• Experiments need expectations, reporting, and measured outcomes to avoid burning money
• Data (1), interfaces (API) (2), bully pulpit (3), get out of the way (4)

Making Sense of Usability Results

by Dana Chisnell

• Get everyone to observe the users
  • More buy-in
  • Less reporting
• Observations before solutions
  • What we heard, what we saw
  • No interpretations!
• Data sources: usability testing, user research, sales feedback, support calls & emails, training
  -> Direct observation is the best
• Focus on behaviors and then make inferences
• Make sure you get everyone’s inferences because they can be subjective
• Inferences: judgments, conclusions, guesses, intuition
  -> The wrong inference can be disastrous
• Opinions: what could we change in the UI
  • Review the inferences
  • What are the causes?
  • How likely is this inference to be the cause?
    • How often did the observation happen?
    • Are there any patterns in what kinds of users had issues?
• Observing users in their own environment is more useful than a lab, which is overkill
• Observe from a few minutes to an hour
• Design direction
  • What’s the evidence for a design change?
  • What does the strength of the cause suggest about a solution?
  • Test theories
• KJ analysis -> uie.com/articles
• Usually not A/B testing -> iterative change is better for usability testing
• A/B testing is good for disagreement among teams but you need enough people to test for viable results
• Solution jar: pay for each time you jump the gun and suggest a solution (.25)
• If you do a review without usability testing make sure you delve in to who the users are and what their tasks would be and analyze those tasks being completed on the site
• Your time is not more valuable than your customer’s time
• Analytics is not useful because you don’t know why those things happened
  -> Could be useful in analyzing drop offs in clear navigation paths
• Motivation is important for usability testing -> the users must be motivated to complete the task and would complete those tasks in real life
• Download presentation for chart
• Observation -> Inference -> Opinion -> Direction
• Debate on whether you should ask your user how they feel during the process among usability professionals
• Debrief of user after testing
  1. How’d that go?
  2. What are two good things about the site?
  3. What are two bad things about the site?
  • Pay attention to the length of time it takes participants to come up with those answers
  • You’re in good shape if can’t come up with bad things
  • You’re in bad shape if can’t come up with good things
• Come up with 5 tasks you’re going to test
• usabilitytestinghowto.blogspot.com

Web Forms: Makeover Techniques

by Hagan Rivers

• Most designs fail as an aggregation of little aggravations (“death by a thousand cuts”)
• Forms are work! Too many barriers and rules
• Makeover techniques
  1. Use your words
     • Responsibility to choose good words for your labels and error messages
     • Use the appropriate amount of words, as few as possible while still being clear
     • Avoid jargon = words that make no sense; use your users’ jargon
     • Keep instructions near the task at hand
  2. Find your voice
     • All software has a personality
     • You can shape that personality or not
     • Forms are where users do a lot of reading
     • Your brand has a voice
     • Imagine who is speaking – who is that person?
     • Don’t let software engineers do the writing
     • Have one person monitor the voice of the app
  3. Say why
     • Tell people why you require certain information instead of just making information required because people will then lie
     • Tell the user why he should enter info
  4. Prevent errors
     • Good defaults really help (filling in city and state based on zip code)
     • Don’t play “go fish” (give users suggestions for user names that are available instead of making them guess on ones that would work)
     • Don’t require formats (phone #, etc)
     • Don’t “force” the user
  5. Handle errors
     • Tell the user what went wrong
     • Tell the user what should the user to next
     • Be specific
     • Use terminology from the interface itself
     • Submission vs. inline errors
     • Brief summary at top when on submission
  6. Be appealing
     • Beware of your alignment
     • 2 column form? Put required fields in the left column
     • Reduce clutter, lines, boxes
     • White form elements on a white background have no contrast

Web-App Navigation: Makeover Techniques

by Hagan Rivers

Look up “Blinksale.”

Part 1: Theory (Types of Navigation)

1. Global navigation
   • The same on every screen of the application
   • The goal is to get the user to the main screens of the application
   • Not just a site map but putting all of the tasks in an easy place
   • Supporting the initiation of tasks
2. Local navigation
   • The navigation for here and now -> the place where I’m at
   • Manipulating or interacting with a table for instance
   • For edit screens w/Save & Cancel, no Global Navigation needed
3. Cross navigation
   • Tool for jumping to related items
   • Concierge of navigation
   • Whole goal is to save you clicks
   • 3-5 crosslinks is enough
   • Not part of the task at hand
   • Need to be hand-crafted
4. Dashboard navigation
   • Links to screens
   • Does away with global navigation
   • Users shouldn’t need to edit the dashboard if implemented correctly so don’t provide this functionality
5. Application maps
   • OmniGraffle

Part 2: Practice (Improving Navigation Systems)

1. Never use icons for navigation
   • Direct correlation between the time it takes you to think up an icon and the time it takes your user to decipher it
   • Its hard to translate words in to pictures
   • Icons are good for status and representing actual objects, don’t use it in nav!
2. Trees
   • Are super “clicky” if not done well
   • Trees don’t work when they’re really long or wide
   • Trees are a slippery slope in that everyone will start stuffing stuff in to it
   • Collapsing never works to the left
3. Pull right menu (nested menus like the OS)
   • Harder to select items
   • Try to get rid of them!
   • Indent items and stick in one menu (multi-column?)
4. Site map
   • Put in footer as secondary nav system
   • Works for long pages
   • Can indicate where you are in the site
   • Haven’t seen them as much in web apps
5. Tab explosion
   • Save tabs to where your nav isn’t going to get too long
   • Hard to find stuff, they all look alike
   • If you color code your tabs it makes your app look like a bag of Skittles, people don’t make a strong association with color so not worth it to do this
   • Eventually you will outgrow tabs
6. Menubar (menus like an OS)
   • System toolbar tucked up right at the top of the window
   • Allow you to have many commands in one space
   • Careful that the navigation doesn’t start to eat in to that actual work area of the app
   • Commands are hidden
   • Work well for global nav
   • Don’t open menu on hover, only on click!

• Start designing from inside out
  • Work on screens before global nav
  • Design global nav last
  • Keep up the app map
  • Treat the global navigation as a mini application that is separate
  • Mix and match different nav systems
  • Test users

Living With Complexity

by Don Norman

• “The Design of Everyday Things”
• Complexity is good
• Simplicity is mostly in your head – has to do with the learning curve
• Relish complexity but not confusion (lack of knowledge)
• Revolution in computer design was to make things discoverable (Mac GUI vs. Unix)
• Make it pleasurable and people will forget if it didn’t function properly or they couldn’t find what they wanted
• Increased complexity and interaction styles are coming into our lives (Android, iPhone, Blackberry, iPad, Kindle)
• Less simplicity in life – browsers and platforms are plentiful
• The experience matters
  • Memory is more important than actuality
  • Design not for the present but the memory
• Fundamental Questions of Interaction Design
  • What just happened?
  • Where am I?
  • Where do I go from here?
• All new smartphones have different rules of interaction which will be a problem later
• UI Design Principles
  • Feedback
  • Learn by Exploration (Discovery)
  • Visibility
  • Consistency
  • WYSIWYG
  • Undo
  • Menus
• Star map for iPod/iPhone/iPad
• Simplicity vs. Complexity
• Living with complexity
  1. Life is complex
  2. Tools must match life (complex!)
  3. Understanding, not simplicity
  4. Simplicity is in the mind
  5. Good design can conquer complexity
  6. Skill can conquer well-designed complexity
• We all prefer a medium level of complexity
  • This changes as you gain more skill (as with wine, music, etc.)
  • Stay in the Flow Zone
• How to conquer complexity as a designer
  1. Fight extraneous features (featuritis)
  2. Modularize
  3. Provide a conceptual model
  4. Systems thinking
  5. Design the total experience
• Features vs. power -> capabilities
• Feature creep = featuritis
• Google modularizes
• Emotions are more important than logic – logic was invented and needs to be taught
• Complexity is good, complication is bad
• Service blueprint
• Keep people informed and in the loop

Neuroscience & Good User Experience

by Dustin Curtis

• dustincurtis.com
• Realistic 3 dimensional objects activate your brain to want to touch them – your brain runs the simulation of clicking on that 3 dimensional object

1. Use realistic controls to mirror physical interactions
2. Develop spatial relationships to take advantage of the hippocampus
3. Create the experience
   • Take advantage of the locus of attention (linear path, mimicking nature)

• User experience is art – not really something you can learn from a book

HTML5: The Future of the Web

by Tim Wright

• csskarma.com/presentations/penn
• HTML5 = Markup + JS APIs
• HTML5 spec overtook XHTML2 spec
• ishtml5readyyet.com
• Full implementation expected by 2022 (two browsers)
• Doctype is shorter
  • <!DOCTYPE html>
  • Technically optional but without could trigger quirks mode
• <meta charset = “utf-8″> is also shorter
• Script and style tags are just <script> and <style> with no type attribute
• Link relations
  • <link rel=”prefetch” (loads a page in the background)
  • Put in the head
• Can make block-level anchors to encompass more area
• Redefined <i>, <b>, <cite> (italics), <small> (fine print)
• Elements removed: font, big, center, frame, acronym, axis, bgcolor, border
• Markup freedom: capitalization, quotes, and self-closing tags don’t matter anymore
• contentEditable = true
• spellcheck = true
• <div hidden></div> (hides elements)
• draggable = true (for drag & drop)
• Microdata
• Can make custom attributes to embed data
• Structural elements
  • Not block level and inline, more like text-based or grouping
  • <header> & <footer>
  • <nav> (for main navigation, mainly in the header)
  • <aside> (can be sidebar content but is really related content or pull quotes)
  • <section> vs. <div> (vary in semantic meaning)
  • <article> (blog post) vs. <hgroup> (heading wrapper)
• <figure> & <figcaption> (figure diagram photo with related caption)
• <time> (“datetime” attribute is machine readable)
• <mark> (highlight search terms inline)
• <progress> (for a progress bar)
• <audio src=”">
  • .ogg open format
  • “controls” “autoplay” “preload” “loop” elements
  • Can have fallback file formats
• <video src=”">
  • Can set up poster frame
  • Flash fallback?
  • Can make your own video controls via Javascript
• Forms
  • More labeling attributes on inputs
  • <search> is problematic; autocomplete=”off” so no drop down of suggestions (e.g., credit card #s)
  • “autofocus” & “required” (for validation)
  • Custom inputs, can use your own regex pattern
  • The “name” attribute is a must when using “required”
  • Take weight of Javascript and put it more on the browser
  • All degrade to text boxes
  • Increased usability and conversion rates
  • Easier styling with attribute selectors
  • Easy validation and less spam
• Built-in accessibility and bolt-on accessibility
  • Aria = set up roles to sections of the page for accessibility
  • “aria-atomic” (this section will reload without page load)
  • “aria-live” (“polite” re-read this when you’re done)
• document.createElement (<’header’>);
  • Elements don’t exist right now
  • Need to depend on Javascript to define them
  • If no Javascript, the whole site could fall in on itself
  • HTML Shiv by Remy Sharp
• Jaxer Server-Side Javascript (then wouldn’t matter if Javascript is turned off in the browser)
• Benefits
  • Reduced page weight
  • Speed and responsiveness
  • Higher conversions
  • Better usability
  • Happy users
  • Device development
• Javascript
  • document.getElementbyClassName
  • CSS selectors
  • More like JQuery
• Geolocation
  • GPS, Cellular Network
  • Lots of data returned back to you
  • Privacy issues – you can opt in to share
  • Gather data via Javascript
  • Check that the device is location-capable
• Storage & Sockets
  • Local storage persistent to browser
  • Super cookies
  • dev.w3.org/html5/websockets
  • Sockets not readily usable right now
• CanIUse.com
• Html5test.com
• Blackberry ships with Javascript turned off
• WebM video format
  • High quality open video format
  • YouTube committed over .ogv
  • microvideoconverter.com
• New <track> element for video

Build to Think

by Vincent Matyi

• digitalmotive.net
• @vinbenimble
• How am I adding value?
• affectivedesign.com “UX Iceberg”
• Prototypes are fundamental asset through project lifecycle
• Eliminates waste
• Provides model to conduct user research at any stage
• “Prototyping” by Todd Zaki Warfel
• The sketch is a quick way to get started
• Dan Roam books, Scott McCloud book, vizthink
• Paper prototype
• Simulated experience
  • Different levels of fidelity
  • PDF, Axure, iRise, Visio, Flash
• Production Ready
• Conduct User Research
• “Integrative Thinking” by Roger Martin
• Tim Brown IDEO
• Bitsmiths are integral to high-performance teams
• Marketing leverages human perception
• User experience crafts for human perception
• Lead With Behavior
• Discount User Research
• Planning User Research: critical to the success of all efforts
• Evidence Based Practices
• Agile Software Development
• Scrum as Science (Defined vs. Empirical Process Control)
• Alan Cooper “The Inmates are Running the Asylum”

• WordCampPhilly Oct. 30
• Splat Productions -> David Hilt
• Categorize and tag things properly for SEO
• brinsterinc.com
• Thesis platform
• Autahulapa
• Child themes = framework themes
• Thematic theme
• @lewg / goettner.net
• WordPress 3.0 new!
  • Custom content types -> added to side bar
  • Custom Post Type UI
  • GD plugin
• Woo themes
• justintadlock.com
• Enhanced taxonomoies
• Everything is a custom post type -> no more pages
• New menu system
  • Based on pages, categories, taxonomies, external links for multi-level menus
• front-page.php for front page of site
• Custom post type templates, custom author templates, taxonomy template support
• New default theme 2010 is a great start for customization
• bit.ly/bPy1mj
• TechnicallyPhilly -> Sean Blanda
  • 3 guys from Temple ’08
  • Happy Cog & Catholic Online
  • Backup plug-in
• BuddyPress
• @FlipperPA

• 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