Thursday, March 20, 2008

South By Southwest: A Little Late, But a Wrap-up

Attending SXSW for the first time is just as overwhelming as everyone says it will be. The number of sessions, people, and taking in Austin is really a lot to do. It’s also great. Experiencing the community that is defining some of the most successful areas of the web is a wonderful thing. It’s sheer size is quite overwhelming, though. Most conferences I’ve attended have been easy to meet people and see them again just by happenstance. At SXSW, if you meet someone interesting, you need to plan to meet them again or chances are, you might not see them again.

The sessions were really great, for the most part. There were sessions of higher and lower quality, but that’s to be expected. It’s of course much different attending the event than only listening to the podcasts. (Side note: the podcasts for SXSW 2008 will be posted here.)

Apart from the session notes and stack of business cards from the show, I now want to order a stack of Bloxes and I’m not even sure what they’d be for. Seeing the “sketchnotes” from Mike Rohde makes me wish I would have taken my notes in a similar fashion :-D

Notes by Southwest: Notes from 3/11/08

Notes from sessions attended on 3/11/08 at South by Southwest.


“Content Management System Roundup”

Just the Gist

Comparison between:

George DeMet,
Owner,
Palantir.net

Jeff Eaton,
Lullabot

Tiffany Farriss,
President,
Palantir.net

Mike Essl,
Owner/Operator,
mike.essl.com

Matthew McDermott,
Principal Consultant,
Catapult Systems

View Notes

  • Sharepoint (George DeMet - MS Sharepoint MVP)
    • Full office suite allows for intranet and internet connection
    • “Master page” + “Page layouts”
    • Sharepoint designer
    • Authoring view - DHMTL menus with options (when viewing pages)
    • Workflow process and approvals built into system
    • Branching built in for design variations and future changes (also versioning)
    • Searching is included into the system
    • Thesaurus and relevance ranking
    • XSL + XML compliant
    • “variations” - usually for multilingual sites
    • “My Site” for intranet users
    • Nav + breadcrumb
  • Drupal - Jeff Eaton
    • Built by the people who use it
    • Hobbyists, businesses, volunteers, Belgians
    • Fast Company, many other major companies
    • Blogs, magazine sites, Terminus 1525 (artists community),
    • LifeTime TV
    • Pete Droge - all Flash content, mtv.co.uk, The Onion
    • End Poverty, Inc. Magazine, U.S. Magazine, DC Comics “Zuda”, Pop Sugar, Interfacultair, Sony Music Box
    • Around 3,000 plugins
    • Theme > Views of Content > Content > Users > Modules and Drupal Core
    • Users all have roles - designed to accommodate a large number of users
    • Blog post - can filter by user
    • Theme layer - generates all xml, html, mobile
    • Can have all mobile pages
    • Default Drupal site is very basic, functionality is added on via customization and plugin installation
    • Great at:
      • user-generated content
      • Many kinds of content
      • Communication
      • Versioned content
    • Other sites:
      • Daughtry (Sony BMG)
      • Artist interaction with community
      • Multiple sites can be run from the same core
      • Sony contributing back to project
  • Expression Engine - Mike Essl
    • “Me and Mr. T” - no custom PHP
    • Archive, error, xhtml, css-compliant
    • All fields on site
    • Invisible NYC
    • Material research - site coded in one day
  • Evolution of CMS choices - Art Institute, Chicago
    • Museum side and school side (2 sides to site)
    • Round 1 (Custom PHP)
      • Dreamweaver + CMS
      • Good: quickly created and running, discrete scope, targeted, simple
      • Bad: Navigation, difficult to extend, support (interim solution - rarely interim)
    • Round 2 (Serena Collage)
      • Nice master page structure
      • Breadcrumbs
      • “Contribution layouts”
      • Good: Master pages, workflow, version control, training contributors, breadcrumbs, links as assets, deployment
      • Bad: Expensive, slow performance, not mac friendly, navigation, training devs, interdepartmental, no support - dynamic, end-of-life product
    • Rounds 3 (Drupal)
      • Indianapolis Museum of Art
      • Drupal - JQuery integration
      • Can customize skin through interface
      • Powerful templating
      • Remote data
      • User management
      • JQuery integration
  • Q+A
    • Drupal - created an install profile to make new installs easier
    • Actions and workflow - control access and approval (built into Sharepoint)

“Creative Collaboration: Building Web Apps Together”

Just the Gist

  • Make sure that developers and designers are talking early in the process
  • It helps for the designer to sit in the same area as the developers
  • Team members need to be multi-talented in today’s environment

Paul Hammond,
Flickr

Simon Willison

George Oates,
Lead Designer,
Flickr

Matt Biddulph,
CTO,
Dopplr

Dave Shea,
mezzoblue.com

View Notes

  • Dopplr
    • About 1 year old, 4 people
    • Ships several times per day
    • Very collaborative
    • “Technical wife and design husband”
    • All active features can be switched on and off in dashboard
    • Live testing = sculpting, not painting
  • Simon Willison
    • Used to work at Lawrence Journal-World
      • Local paper in small town in Kansas
      • 2 devs, 1 designer (css + html engineer), bunch of editorial staff
      • The work at Lawrence Journal-World grew into the Django framework
    • Parallel Workflow
    • Devs design the underlying data model
    • Automated admin interface allows content producers to start entering data
    • Devs building the logic for the customer-facing pages
    • Today...
      • With apps, underlying data is not as consistent
      • Continuing collaboration with a designer is essential right from the start
  • Dave Shea - Mezzoblue
    • Client design work, designer who codes
    • Independent
  • George Oates
    • Flickr.com, over 2.3 million photos
    • Paper and whiteboard
    • Over 20 million photos
    • Core dev team grown from 3 (5) to 16 (40)
    • Supporting cast of over 100 people
    • Still try to release early/often, but is difficult with more people and a larger organization

Decision-makers

  • Everyone responds well to seeing a design mockup
  • Collaboration between the roles - don’t leave out
  • Flipside, “skin this”
  • Make sure both are involved early
  • Sit in the same room
  • The top-down stuff can cause a top-down breakdown
  • Prototyping very useful, especially with live data
  • When you build prototypes (in company)
  • Depends on skill-set of team

Job Roles

  • Need to be multi-talented
  • Most productive involve small teams of generalists
  • Shared understanding of produce - voice of product
  • Devs can see weird little use cases, errors, etc
  • Especially important for independent to generalize
  • Larger teams have a harder time making decisions
  • Sometimes there isn’t as much overlap as there should be
  • Process is an antidote for stupid people
  • Shea: Contracts explicitly set out a design process
    • Enforced only if it’s taking too long
  • Humans don’t respond well to anarchy but also revolt against overly pressuring red tape
  • Internationalization can invite more problems
  • Designing for blank slate, zero data, data constraints, are important when designers are working with live data
  • Learning svn is a very good idea

How can devs and designers communicate more effectively?

  • Client-side vs. back-end developers - need to have people that are focused on each
  • Abstractions are a little to tough to talk about in the beginning
  • Agile change management and request systems
  • Quickly make suggestions and rebuttal - smarty for PHP
  • Bugs and design decisions
  • Differences between team structure and personalities
  • The design quality of the prototypes should reflect the level of completion
  • Put a css class on the pieces that are not finished
  • Mentoring is incredibly important
  • Agile really relies on client being present
  • Client-side dev - at least slice up images

“Taking Over the World: the Flickr Way”

Just the Gist

  • Localization can be made less painful, but requires a lot of good planning
  • Community and professional translation methods can be leveraged for community-centered sites
  • The business must also be localized, how will you provide support and allow feedback for other languages?
  • Always use UTF-8 and plan the system for possible future localization (keep internationalization as part of the creation process)

Simon Batistoni,
Flickr/Yahoo! Inc

View Notes


  • Flickr engineering team
    • Launched June 12th, 2007 -the localization took 7 months for 7 countries
    • Emphasis on language over locale (not everyone in the U.S. speaks English, and that's true for every country in the world - every citizen of a country does not necessarily speak in the official language.)
    • Good set of localization tools when you can use it in a wide range
    • Too many words/legacy code
    • UTF-8 was already being used, helped - time zones
  • Hugely passionate community
  • Usually people aren’t as emotionally invested in most sites
  • Flickr-people feel more passionately
  • Other challenge - owned by a big company. The purchase by Yahoo! gives Flickr a lot of resources to work with, but it also comes with more large company issues to deal with.
  • Introduces other strains and constraints
  • Internationalization vs. localization (i18n vs 110n)

Internationalization

  • What you do to make the site ready for localization
  • Make sure to deal with time properly
    • Character data/sets
    • Community data/sets
    • Community interaction - bugs, reports, etc
  • Content classification - different countries have different value systems, especially an important distinction for media. What is okay in the U.S. is not okay in some other countries, and vice versa.
  • Payment systems
  • When is the right time? Doesn’t really matter, but should worry about it from day one.
  • It’s only okay to not internationalize a system unless you’re absolutely sure that it will not be localized (extremely rare)

Localization

    • Not just starting, where does it make sense to begin the process?
    • Language-switch
    • Legal review - large or small company - legal landscape in other countries
    • Ex: YouTube in Pakistan (keeps getting shut off)
    • Issues can impact you in a big way
    • Staffing - need very different structure - need to be able to take things like bug reports, and provide customer customer care. If it needs to be translated for product team to respond, how does that happen?
      • All information must get routed tothe right place to provide the right sort of response
    • Flickr did a tour of all the countries that they were localizing for
      • Ex: Found that Korea didn’t like white layout - too much whitespace
      • Have not yet addressed other versions of template for issues such as this
    • Don’t Rush!
    • Focus on building a really good product first
    • Better to do it late than horribly, to enter a market and get a bad reputation is much harder than to launch when ready

Be prepared

  • Make sure you know where all the text strings are
  • Image tags with titles and acts
  • HTML alone is not enough
  • Some people use keys {sentence_replace_confirm}
    • Downside: debugging templates becomes very difficult with so much meaningless data on the page
    • Slows down entire process
  • Trans Jaxxx - the tool Flickr built for text strings uses a similar marker, but is much easier and semantic to view - just adds little tags like <!!>Text for translation</!!>
  • Also work in title tags and iamges
  • Attributed such as
    • <!! esc=”squat”>TEXT</!!> (escape the string)
    • <!! dev=”replace”> (replace the string)
    • <!! note=”not goes here”> (note for the string)
  • Can be working on 5 or 6 things at one time (features)
  • preg_match_all
  • W3C has internationalization system can all be together
    quite complicated

Say no to concatenation, can cause a lot of problems for the system

  • My {$beverage} brings all the {$gendered-people} to the yard
  • BAD! = FRENCH
  • More code than there should be
  • <!!>{$username} added you as a contact</!!}

Dates, times, numbers

Encoding

  • Use UTF-8, always, just do it
  • Matches ASCII characters
  • Most compact byte representation

Design

  • German is awful for line length
  • Must be flexible
  • Fluid too a degree, has to be able to expand a bit (40-50% - but sometimes too much)
  • When you use images with text in them, need to create them each time - drawback, but makes a decision

Taking The Plunge

  • Established growth
    • Growth potential
    • Usage possibility, or growth market
  • Potential headaches
    • Localize somewhere, need support
    • If not, a web site with no way to contact us - highly discouraging to users
    • Content - legal, cultural issues
  • How much money do you have?
  • Have to worry about translation
  • Translation management tools
  • (http://en.wikipedia.org/wiki/Translation_memory)
  • Trans Jaxxx - internally (Flickr)-built translation tool
  • Text units have red boxes around them (using the tool)
    • QA people can click on to edit the text
  • Community-powered Translation
    • Free, or at least, cheap
    • Broader demand-driven translation
    • Community ownership of content and process
    • Downside: moderation and QA can be difficult
      • Community or professional for review? Can do it either way, but need to choose early. Some sites are using a mix, this is all easier to do if the site already has a solid user base. English-speakers already using the site are often motivated to help localize the site if they have ownership. in it. The biggest successes have so far been community-based sites, which makes sense because there is a source of motivation for “free work” to be provided.
    • Community-only translation does not address the support issue of providing the same level of support to each country if you are only an English-speaking organization.
    • Also doesn’t allow for secret launches (everybody knows you’re doing it)
    • Examples: Live Journal, Xanga, Facebook, Google
      • Facebook dumped in text from Babblefish and then let the community correct the text
  • Professional Translation
    • Banks of translators, all over the world
    • Is expensive
    • Hard to capture right tone, pros don’t usually care about keeping the tone or personality of the site correct, more about volume
  • Deploy - Flickr deploys between 5 and 10 times per day
  • Pre-bake all templates (PHP + Smarty)

Legal/Policy

  • Get some advice from someone who knows, which probably means someone from the region that you are localizing in
  • Cultural considerations

Foster A Single Community

  • Tear down the barriers where you can
  • Groups - allow translation of groups by users
  • Other help is geographical stuff
  • Visual means where language doesn’t matter - very helpful
  • Want to make localization seem trivial
  • Google makes assumptions based on IP, but that has a lot of drawbacks
  • Even in US, there are plenty of other languages besides US
  • Flickr uses a multi-stage “flitering” to determine what language to display first:
    • Cookies for return visits, preferences on other Yahoo! properties
    • Look at where they came from (Ex: if the traffic came from a French-speaking site, chances are that they speak French)
    • Flickr also use IP location, never heard complaints
  • hitherto.net/talks, simon@hitherto.net

Question & Answer

  • Using .fr for anything?
    • No, but the switching is not good right now
  • Combine community and pro translation?
    • Pro as QA - professional translators provide the quality assurance and make sure that each translation is actually saying the correct thing for each text string
    • Community as work - community provides the text translations
    • “Draft and Official” versions of site - “draft” before it goes into review and becomes “official” text
  • How does Flickr handle support issues for localized versions?
    • Have support agency to filter incoming reports
    • Also have employees to do forums
    • It needs a human being behind it, can’t just throw a product out with a language and no one behind it
  • Release Transjaxxx (the custom internal tool that was written by Flickr)?
    • Would like to, but nothing is solid
    • The downside of most translation software is that it tends to be desktop-based

Notes by Southwest: Notes from 3/10/08

Notes from sessions attended on 3/10/08 at South by Southwest.


“The Art of Self-Branding”

Just the Gist

  • Branding yourself is harder than branding a company
  • Care about quality, keep it consistently good

Lea Alcantara,
Owner & Hired Gun,
Lealea Design

View Notes

  • This is not about not about how to design, etc
  • Entourage clip - Vinny Chase and brand names
  • Branding a company
    • Many reiterations, objective, inorganic
  • Branding yourself
    • Little no restriction, very subjective, organic
  • Brands are built on what people are saying about you, not what you say about yourself
  • Treat yourself like an amnesiac - Who are you? Who cares about who you are?
  • Interbrand 2007 Marketer
    1. 5. Relevance
    2. 4. Creative design/Brand I.O.
    3. 3. Talk the talk
    4. 2. Do who know who you’re talking to?
    5. 1. Consistently
  • Comparison of Wesabe.com (“nice guy”) and Mint.com (“guy’s guy”)
  • Relevance
  • Do you make sense?
  • Look around you
  • Nice guy - blissfully unaware, afraid of change, same approach
  • “Guy’s Guy”- changes w/ the times
  • Mint is about the quality of the presentation (And the tool is just as good)
  • Creative Design/Brand I.D.
  • Does your look match?
  • Sum of all the parts, not just the logo
  • Personality to product
  • GG - cares about presentation
  • Mint - easy to spell and remember
  • The quality of design adds to the level of trust
  • Emotion is the experience in user experience
  • Nice guy: forced, Guys guy: natural
  • Every potential equal - some are better than others
  • Too spread out - weakens the core
  • Example: Wesabe in 30 countries, but that many countries make the quality less overall
  • List of features, slideshows goes nowhere (Wesabe)
  • Mint: U.S. only, outlines benefits, and clearly defines outlines itself
  • Sample banks and cards easy to find
  • Consistency
  • Same quality in everything you do?
  • NG - all over the place
  • GG - consistency is key
  • Persist through CRAP
    • Criticism
    • Rejection
    • Assholes
    • Pressure
  • Differentiate
  • Educate those who you’re talking to
  • Best Personal Brand?
  • Actively: celebrities
  • Tim Ferris (The Four-hour workweek)
  • 37 Signals (Jason Fried)
  • Process vs. Consistency?
  • Getting to know who you are, listen to users
  • Scott Bam - Pixel Media/Someone else branding?
  • Eliminates some subjectivity
  • Rebrand vs. rebuild
  • People who vouch for them
  • Transition to resume (importance of)?
  • Targeting wrong audience
  • Self-branding becomes self-selective
  • General business terms get ignored
  • Find and exploit weaknesses in another brand?
  • Frequency
  • Slow marketing: make friends
  • Conscious of personal brand while Twittering, etc?

“A Critical Look At OpenID”

Just the Gist

This was a great introduction of OpenID, but was very difficult to notate. The biggest take away for me was that Open ID needs some help yet. The idea is great, but until the larger web properties open up the sign-on system, the promise of the idea is not delivered. For example, Yahoo lets you “use” Open ID, but only as a provider and not a relying partner.

Artur Bergman,
Dir of Engineering,
Wikia Inc/O'Reilly Radar

George Fletcher,
Chief Architect,
AOL LLC

Jason Levitt
Eep! Eep!

David Recordon,
Open Platforms Tech Lead,
Six Apart Ltd

Andy Smith,
Google


“Adaptive Path: 10 Tips for Managing a Creative Environment”

Just the Gist

  • Found best practices from researching a wide variety of high-functioning groups that had an output that with a firm, repeating deadline
  • Share the knowledge, both for skills and for project direction
  • Don’t forget who you are talking to
  • Be willing to give up work, not everything is good to keep around

Bryan Mason,
Chief Operating Officer,
Adaptive Path

Sarah Nelson,
Design Strategist,
Adaptive Path

View Notes

  • Not a lot of design history to rely on, a bit ambiguous
  • Started looking at other high-functioning groups - how do they do it?
  • Kitchens, writers, playwrights, hard deadlines that repeat over and over
  • Doing different things with the creative process, playing with it
  • Neo-Futurists
    • Chicago-based theatre company
    • 30 plays in 60 minutes
    • 12+ new plays every year
  • Culinary - “Aqua” in San Francisco
    • How a restaurant system can put out a precise product, consistently
  • Orchestras
    • Professional orchestras - Doing entirely new, full concerts every 1 or 2 weeks
  • “The Job Factory”
    • High-functioning group of screen writers
  • Steppenwolff (www.steppenwolf.org)
    • Includes people like John Malkovich, Gary Sinise, Joan Allen, and more
    • Another Chicago-based acting group
    • 30-35 members
    • Groups of members can decide to work together, or not
  • Avenue Q
    • Broadway show with puppets
    • Web Techniques/New Architect
    • Editorial staff relied on

TIPS

  1. Cross-train the entire team (increase empathy and experience)
    • Both production and administrative
    • Teaches you the possibilites
    • Switching roles, ex: Neo-Futurists, always rotate roles
    • Want to have a sense of what the other other groups are up to
  2. Rotate Creative Leadership (mostly Neo-Futurist influence)
    • “The Hammer” - PM + Creative Director (in one)
    • Changes person-to-person, multiple products at the same time (roles are according to project)
    • Each actor also writes (Neo-Futurists)
    • “The Conductor” - Voluntary role - facilitates rehearsal process
  3. Actively Turn the Corner
    • Defined by sense of possibility
    • “No bad ideas” -> to eliminating ideas (two parts of the process)
    • One source of frustration in a creative environment can be someone on the “wrong side” of divergence vs. convergence
    • With people in wrong corner, either good ideas executed poorly, or bad ideas executed badly
    • N.F. has a strict turn point, don’t allow people to get off the side
  4. Know your roles
    • “Battle stations” - really successful teams know and run to their roles (kitchens are a great example of this - each person has a distinct role that is also vital to the function of the whole)
    • When a kitchen is in service, it relies on everyone doing what they do
    • In production phase, much different
    • Orchestra: Each section leader is in charge of each section and sits on the end of a row, it’s up to the person next to them to follow bowing, etc - down the line through everyone in the section... it all starts from the section leader, but each person is following the person to the side of them
  5. Practice, Practice, Practice
    • Want to be prepped when the team needs to push together
    • NF do it by repeating the process again and again
    • When same groups work together, it becomes the same
    • NF will also sometime try to break their own rules to try something new
    • People will look for opportunities to practice
    • Non mission-critical projects for new people or methods
    • Practice is before getting paid for it
    • “Design sprints” - adopting and extending the idea of design sprints at Adaptive Path
    • Start off week deciding what to do for the whole week
    • Will do it in room with client team (if it’s the right client, does not work with everyone)
  6. Make Your Mission Explicit (To The Whole Team)
    • Avenue Q - threw out a lot of their early work (just couldn’t use all of it)
    • Ex: Google - “organize the world’s information”
    • If the team doesn’t know what’s happening, the chances of it’s success are very low
    • Missions explicit, and actionable
    • “Manifesto” for NF - what makes them different from other theatre groups
    • Specific set of rules to play with
    • Actually constraints allow for more creativity, able to flip something upside down
  7. Killing Your Darlings
    • Find respectful ways to remove material that doesn’t support the mission
    • Supportive, respectful, responsive feedback and teamwork
    • Every time they cut something, say “we’ll add it to the TV show”
    • (Avenue Q) - trick is, they won’t have a TV show
    • Same at a kitchen...when you have your own restaurant...
    • As reliable as they were willing to be
    • “That’s great for phase 2”
    • NF - on Sundays they do play cutting
    • Originally negative, then changing
    • Team meeting of play listings - start at top of the list and work through - if one team member says keep it, it stays
    • Relentlessly positive - yes or skip
    • Adaptive Path - no conversation about potential hires, only if there’s a huge disagreement. Normally, it’s only a thumbs up or a thumbs down in a room. Otherwise, no discussion
  8. Leadership As A Service
    • Avenue Q - when a new director was hired, first thing he did was go through the entire cast (Broadway Show - it’s a lot of people) and listened to their entire involvement
    • In a lot of design departments, visually opposing
    • Facilitator vs. dictator - giving people the space to do good work
    • Coming together vs. cog in wheel
    • “Art of Possibility” book - transforming
  9. Generate Projects Around Group’s Creative Interests
    • Work is made together
    • Can choose to work together (Steppenwolff)
    • IA person can work on taxonomies
    • Projects by interest - if a project is closer to a person, they will do more and better work
    • Do stuff that you are engaged in/with
    • Also important in-house to keep people engaged, come at something from a different angle
    • “The Job Factory” will drop projects if it’s not working out, or if they have too many similar in a row
  10. Remember Your Audience
    • Doing it for other people...determine whether or not it is just part of “vision” or will serve the audience
    • Learn how you relate to users and anticipate feedback they will give
    • Written for people in diners and parks (Avenue Q)
    • Kitchen - segments audience into “regulars” and “new diners”
    • The regulars are the brad and butter, but new diners are an opportunity for something new - both represented well
    • NF will look at whole experience of show, doesn’t compare with other acting groups - compete with bars and sporting events (late at night)
    • As UX people, easy to see importance
  11. Celebrate Failure
    • Often mentioned, rarely followed
    • Necessary byproduct of a creative process - not everything (if it’s original or trying something new) will be a success
    • Adaptive Path - renamed “Post Mortems” to “After Parties”
    • There are small parts of failure in every single project
    • Talk about things that didn’t work but avoid blame = take risks
    • Have to be able to take risks
    • Keeps you from becoming formulaic or losing the soul in your work
    • Without, would produce the same work again and again

Q&A

  • How?
  • Create guerilla tactics
  • Shared vision is a necessary component of the shifting roles concept
  • Need to have a Mr. Bush - “The Decider” - ABSOLUTE MUST, or everything collapses in a pool of confusion
  • Fine line - good to not always bet the leader - rough role to have all the time
  • Help to not become stagnant? Creative blocks?
  • Sometimes will get hooked on some problem
  • Remind of original intent - otherwise will stagnate: ex: “we need a new website” is not enough to go on - need a purpose, some specific things to accomplish
  • Practice? Correlation? - Photoshop/Illustrator - not typically provided - throw away work
  • Prototyping?
  • Tried to figure out how to have play time during projects - ex: play time, sketching

Wednesday, March 19, 2008

Notes by Southwest: Notes from 3/9/08

Notes from sessions attended on 3/9/08 at South by Southwest.


“Wireframing in a Web 2.0 World”

Just the Gist

  • A wireframe is cheaper to build than a whole product and saves a lot of time
  • Allows for very rapid iteration and a great tool for agile methodology
  • Should be using the product or project in some way as early as possible, and this allows for that

James Box,
User Experience Consultant,
Clearleft Ltd

Richard Rutter,
Production Dir.,
Clearleft Ltd

View Notes

WHY?
  • Cheaper than building the whole thing
  • High-fidelity prototypes, meaning that it shows ALL interactions and workflow
  • Using something is better than talking about it or guessing
  • The more complex page interactions that are becoming more common require more encapsulation (more interaction per page in modern web design)
  • Deliver the whole experience, so are able to get a much better feel for what will happen with full design
  • Possibility scale - open, now, rather than confined when the actual is being constructed
  • Without page refresh, feedback mechanisms need to be built back in (for the user)
  • Universal appeal of high fidelity prototyping - it’s easier for people to get what is happening, and a better foundation on which to make decisions
  • The high-fidelity prototypes give the opportunity to usability test them

HOW

  • Basic start, server sides
  • JQuery-powered for functional prototyping - also allows for a large number of off-the-shelf plugins for quick iteration
  • Spend time on design, not coding (keep the code messy, it’s meant to be quick)
  • Example: Lightbox off shelves - can plug in default styles and know you will change them (or not)
  • “Notes” tab on page - turns on notes in page to show them revealed on click (and turn back off again) - alows for all elements to have attached notes
  • Mimic simple ajax action with the help of JS libraries and plugins/turn objects on and off to mimic dynamic objects
    • Ex: showing/hiding objects to fake interaction (ex: stars for rating, etc)
  • Shared library of widgets between groups (build up a library so they can be used again and again - emphasis on speed)
  • Sharing early will save crucial time down the road
  • Dealing with other “ifs” - timeouts, error, notes, etc
  • Show/hide states again for much more exploration while designing
  • Can add additional states to the “notes” bar
  • JQuery plugin w/ new bamboo - polypage plugin allows for this interaction
    • Adds the options to the bar automatically
    • Client example: Eden Bee
  • Looking at an actual page will show how complex it will actually be
  • Ex: whether or not to use ajax - in this case, 3 interactions in line was too much for one page
  • IA vs. using to see if it’s working
  • Polypage demo: elfcartel.clearleft.com - LIVE DEMO (of Elf Cartel wireframes)
  • Use wireframes as templates, helps to keep momentum going, work away from waterfall methodology
  • Usually, Wireframes are built for speed and assets are built up over time as the wireframes are used
  • The wireframes should not be kept a secret, and should be actively used by the team
  • Ensure conversation is structure/behavior - the wireframes are not about style or designed details
  • Subversion version control is used to keep track of changes as the prototypes are developed (at least for Clearleft)
  • Sometimes keep track of release number (of the prototype) in either the polypage selector, or in a list
  • Can use xml/ajax to simulate a database interaction
  • Paper mixed w/ high-res forms (sketch this before building it, use the wireframes to refine interaction, workflow, and layout)
  • Always starts with paper, for formatting

“Magic and Mental Models: Using Illusion to Simplify Designs”

Just the Gist

  • Designers can learn some things from magic
  • Controlling perception is key to providing a good experience and even improving the sense of something
  • Being aware of what to reveal and hide from user’s about technical details is very important

Jared Spool,
Founding Principle,
User Interface Engineering

View Notes

  • (Using the models of magic to result in the delight of users)
  • “Magic” = certain level of delight
  • Jared became interested in magic because his son was getting very into magic, and he’s been encouraging him

1. The Role of Mental Models

  • Illusion = Separating the user’s mental model from the designer’s model
  • Opposite from normal - communicate what you WANT the user to think is going on
  • Example: Teller and the “Miser’s Dream” and later explained it and in video
  • Disney’s Haunted Mansion
    • Experience: scary sounds, floating chandelier, head in ball
    • Technical: lights, scary sounds, tracks, speakers, etc
  • A computer example: “Deleting a file” in the OS - not actually happening…the file system is a lie
  • “Complexity fades to the background, simplicity comes to the foreground” - Marissa Mayer (speaking @ Core 77), VP Search & User Experience
  • Another example: Flickr.com - loading, visualizations, sets, etc - all lead into an experience and structure that's rearranged dependng on the viewing method

2. The Role of Perception

  • Tunneling effect - this was a live demonstration of a large, spinning disc - when the audience looked at it and then at a person’s head, their head would either contract or expand depending on the direction the disc had spun
  • Another computer example: Perception of time - blank vs. arrow vs. countdown (for loading, or other methods of showing a chronological progression or data loading)
  • All metaphors give a different perception of the passage of time
  • Even if the metaphors are exactly the same length, they come across mentally as taking more or less time
  • In one user testing example, they had done a test where they just studied user’s experiences compared to the real data. It was a very open test where they could surf pretty much wherever they wanted. The results were uniformly the same, but there was no uniformity from perception to reality. Task completion is the real key to perceived speed.
  • Tricks and helpers can be used to affect the perception of speed. A good example is the preloader on YouTube (and many other) FLV players - starts to play the video as it is being streamed.
  • Designers must understand perception

3. The Role of Delight


“Logos: Why They're Irrelevant and Can Actually Hurt Your Business”

Just the Gist

  • For a startup, emphasizing on identity and logos can distract from more important tasks

Jeremy Britton,
Partner,
Zurb Inc.

Christina Wodtke,
LinkedIn

Luke Wroblewski,
Sr Principal,
Yahoo! Inc


View Notes

  • People have created iconography to represent something larger for as long as can be remembered
  • The main reasons to not focus on identity can be broken down into costs, printing/money, time, momentum that could be used elsewhere
  • Industrial Revolution to Information Age
    • Manufactured goods vs. URL
    • Naming vs. logo
    • Principle of scarcity
  • Experience Economy
  • Separation of identity and webwork
  • Build the business first (startups)

I think I would have found this talk more interesting and convincing if I was involved in a startup, it had good points on that level. It failed to persuade across as large of a generality such as the title would suggest. A better title would have been “Identity for Startups” - it weakened the presentation to jump back and forth between the generalities of presenting an entire history of the logo (at least in concept), and then did not successfully drive the reasons home for their lack of power in today’s world. It was way too tied to the online world, and to a startup experience - both of which they had good points for. It failed to deliver what the title seemed to be promising, however.

http://www.lukew.com/ff/entry.asp?659


“Tools for Enchantment: 20 Ways to Woo Users”

Just the Gist

  • Design attention to users into your tools and into your system of creation
  • Inspire and cultivate your user community
  • Give them the tools they need to have the best possible results, it will ultimately come back to help you

Kathy Sierra,
CreatingPassionateUsers

View Notes

  • “Cognitive seduction 4.0”
  • How do you help users kick ass at something?
  • To make better products, we must compensate for lack of humanness in them
  • Which is better? A kick ass... A. Product, B. Company?
  • What about C. I (the user)
  • Care about how they feel about themselves
  • Higher resolution user experience
  • Being better IS better
  • Neuro Genesis - Enriched environment = neurogenesis possibilities
  • Brain death by dull cube
  • Difference between fantastic and average
  • Not all about natural talent, talent for practicing
  • “We need a rage to master”
  • What do you help your users kick ass at?
  1. Use Telepathy
    • Two flavors of mirror neurons
    • Allow us to run simulations of experiences
    • Resolution of the simulation depends on you - on what you’ve done
    • For visualization - sitting and thinking about doing something does improve your ability to do it (ex: downhill skiing, etc)
  2. Serendipity
    • “Psychic” shuffle
    • “Serendipity” curve
    • Add randomness
    • Creative idea cards - Brian Eno
  3. The “Dog Ears” Principle
    • iPhone scrolling ends in a little bounce
    • Real world physics - something small matters
    • Think about details as small as physics in animations, even if they’re small
  4. Create Joy
  5. Inspire First Person Language
    • Example: In positive reviews, tend to be more “I’s”
    • Is there a larger action to connect it to?
    • What do they have in common?
    • Care
    • Give your users a way to woo other users
  6. T-Shirt First Development
    • Inspire passionate users and they will share it with others
    • Make the shirt and other items before the product, will help to promote it early
    • People will express passion with objects
  7. Easter eggs are great, so are other goodies
    • People love discovery
  8. Tools for Evangelism, give your users a way to woo other users.
    • Video: “Twitter in plain english
    • “My passion is awesome, yours is lame”
    • Help users defend this “totally lame waste of time” - Ex: Flickr, Twitter
  9. Reduce user Stress!
    • Manage the user fight/flight response
  10. Exercise the brain
  11. Give them superpowers quickly
    • Example: Electric Rain: A user must be able to do something cool in 20 minutes or less
  12. Momentum (Speed Up/Shorten How Long It Takes Someone)
  13. Focus
  14. Make your user documents reflect great feelings
    • Can mean the difference between “oops” and “you bastards”
  15. Reinvest Mental Resources Into New Problems
  16. Culture of support
    • Make sure that there are places that there are no dumb questions or answers. Teach your community how to give and take questions and answers.
  17. Do not insist on ‘inclusivity’
    • Passionate users talk differently and will sometimes use jargon. Separate advanced and normal users from the beginning.
  18. Practice seductive opacity
    • The brain loves mystery, anticipation, and curiosity
    • The digital world has raised the value of real-world things. A good example is the the packaging “unboxing” pictures you can find across the internet.
    • Example: Electric Rain - “getting and installing should feel like getting a gift”
    • Etsy - It’s not boomer nostalgia
    • Make Mag, Na Bak Tag, Chumby
  19. Atoms are not old school
    • People have senses, use them - ibuddy, etc
  20. Do what this guy does

Tea and Scandal Notes


“SEO 3.0: Optimizing Search & Social for 2008 and Beyond”

Just the Gist

  • Search Engine Optimization is a marketing tool, not just an analytical exercise - a marketing background can help
  • Still optimize for Google
  • Move to cost per action
  • Focus on providing good content, foster good word-of-mouth and links with your content
  • Mixed search results are becoming more common, so delivering a wider variety of media (including video) will become increasingly important
  • Find other ways to appear at the top of search, Google Local for example

Bill Leake,
CEO/Pres,
Apogee Search

View Notes

  • Search is a type of marketing. It is better to have someone doing it who is good at marketing than just an analyst approach. Though, mathematics is more and more important.
  • Google is still the overwhelming leader = it’s a Google world, so it’s best to optimize against them. Not only does a competitor have to have something better, but Google has to do a face plant in order for this to change.
  • Destination sites, particularly socially-based are making headway into popularity against Google (Facebook, etc)

Trends

  • Online is a piece of a total marketing approach
  • Avoid online industry myopia
  • Integrated usually works best – “be on both sides of Google” (Facebook/LinkedIn ads, plus search – combination approach). This requires a tight internal communication to pull off. Use online and offline together for mose effect.
  • Types of- 1. Word of mouth/referral marketing (best), 2. well-done PR, 3. search/internet marketing
  • Funnel of measurement for web: Impressions > Clicks > Leads/Sales > Offline sales
  • “measure twice, cut once” – use your data, build on it, see what’s working

Online Marketing Trends

Pay-Per-Click Trends

  • Understand who your customers are
  • Turn on and off marketing spin outside of normal
  • Move to cost per action
  • Bid management on the most competitive phrases – not necessarily the most popular terms
  • Site targeting is worth it. You choose the site, this trend is very threatening to large firms.
  • A/B testing
  • Keyword, ads, landing page
  • “Procter and Gamble” story: they had been languishing in the market, but started using their affiliates for product ideas, now most of their product ideas are not created internally. (Basic idea is draw fromView Notes a larger bucket – consider buying a wider range of adwords, etc – a broader base will allow for more competitive performance based to cost.)
  • Keywords that may have worked in the past (finding site) may not once those words become more competitive
  • Think of Google as supermarket – shelf space is limited. How can you dominate, have an unfair amount of that shelf space?

SEO Trends

  • GOOD content is king (again) – most important thing
  • Links are really important, and effect Google heavily. HS Yearbook analogy: the more people that signed your yearbook, the more popular you were (validation). Not all links good – what are the links in saying? There is a lot of contextual analysis around links to site (page/trust rank).
  • Keyword density doesn’t matter, and can kill conversions. Too much SEO time is wasted here.
  • 80% of your Google ranking is what the world is saying (about you), 20% about yourself. The most important is the title tag. Use the keyword you need to be found in the title tag. Like “Keyword here, brought to you by Company Name”. In that 20%, about 6% is keyword.
  • Do not let SEO write content – most not qualified. Use writers, or write yourself.
  • Write content that will GIVE LINKS to you
  • Link baiting: funny, news, resource, controversial (“contra” hook), flame (not recommended, but can work)
  • Basically, it’s all about the experience
  • PR agency (good) press releases are excellent SEO (your content on other people’s sites) with keyword embedding (based on data)
  • Best results with frequency, keyword embedding, use internet wires, internet-only releases are great (not a print one is fine)
  • Online reputation management: what people can and can’t do with your copyrighted material – if you have enough customers, you will find crazy and evil – hopefully not both
  • VERY FEW in SEO are doing local, USE THIS
  • It’s another way to get ranked in Google, also map will show up above search results
  • Blended search will be more and more important, getting media and other content out there will help more and more (maps, video, books)
  • Get listed in multiple categories
  • Properly tag content (VIDEO)
  • Boring text listing can’t compete with video listing – plus they’ll be more engaged. It’s worth it.
  • Get ranking in multimedia

More Hype Than Real

  • Pay-per-click
  • Mobile is getting bigger, but not in ‘08 – iphone helped, but still to painful over all. Maybe 2010-11?
  • Virtual worlds (don’t waste money in second life) – only about 100,000 ACTUAL users, numbers heavily inflated – heavy and expensive

Real in 2008

  • Video. People will respond.
  • Social media optimization will become more important.
  • More convergence and cross-channel marketing (across platforms and media, experimentation will happen more and more, properly done online measurement drive more and better)

How to optimize video?

  • Video must all be tag-driven
  • Make a smaller video
  • Use Youtube, or other popular sites (more likely to deliver results)
  • Tags and text around video, but not overly done (again, youtube does this as part of the system – so better)
  • Run ALL versions of an ad – better to pick them all then to pick the wrong one internally. Use the data that is available to everyone now and use it. It’s much cheaper to produce and experiment short-term than to do the wrong thing long-term.
  • Change the way you think about delivering. After finding what works, THEN optimize – build landing pages, etc. Unless you are getting the clicks, don’t do the work.
  • Use the data, that’s what it’s for. Ignore it to your detriment.
  • Try not to create something and not use it (create and use everything, at least test it)
  • Not getting results? Move on.

Notes by Southwest: Notes from 3/8/08

I've been meaning to get my notes up from South by Southwest, but wanted to do it all at once and it has taken me a while to get them out of my notebook and into a better form! So, here’s the first set, also had several sessions on 3/7, but I’ve only posted the most interesting sessions.


“Design Is In The Details”

Just the Gist

  • Little things add up to make a big difference - sum is greater than the parts
  • The little details are important
  • Take the time necessary to do something good, obsession is good
  • Be proud of your own work, you care more than anyone else will

Naz Hamid,
Art Director, Weightshift

Lives in Chicago, works with designers around the country.

View Notes

  • Little things add up to make a big difference [in a project] - or, whole is greater than sum of the parts
  • Within context of the design, does it make sense?
  • We care, listen, solve problems, and take pride in our work

Finding inspiration in design objects and destinations:

  • Hotel View NotesMax - Seattle
  • Rapha Software
  • Triax Vator 300 (Nike Design)

Experience

  1. Choices
  2. Choose simple, elegant
  3. Consistent
  4. Stay consistent, build up design on parts
  5. Completeness
    • Don’t want them to get hampered down on details [that just look wrong]
    • Get it done, done (show what you want them to see, avoid making excuses or explaining missing parts)
    • “Kellog view”/”Kellog insight”
    • All details are important
  6. Step in, step out, step back - balance
    • sometimes take a two or three day break from a design
    • What are your initial reactions when returning to a design?
  7. Be your own critic
    • Yale law school library
    • Simplify it if it’s not working
  8. Complexity in simplicity, less is more
    • Humanized site
  9. Obsession is healthy
    • Thoughts, revelations, breakthroughs
    • Waiting on a decision, let yourself think for the right answer
    • Also, don’t be afraid to act on something

Opening Remarks

Just the Gist

This was more of a conversation, so difficult to notate, but it will make a great podcast when it comes out.

  • College of knowledge vs. encyclopedic
  • More brainpower w/ collegiate vs. singular
  • Lost vs. the Wire - Media differences
  • Values applied in convergence out of work
  • “We” vs. “I” - Language of social networking - Outside in
  • Hillary vs. Obama

Henry Jenkins,
Co-Director of the Comparative Media Studies Program at MIT

Stephen Berlin Johnson,
Author, Founder of outside.in



“Blood, Sweat and Fear: Great Design Hurts”

Just the Gist

  • Design can be a present, “design for Christmas”
  • There is no barrier to entry on criticism of color or design
  • Pixel-perfect mockups, for each conversation
  • “10 to 3 to 1” - Start with ten, go to 3, then get down to 1
  • Brainstorming and “Pairing down” meetings every two weeks
  • The notion that the better a design is, the less resistance it receives is simply not true
  • Ideas matter more than talent

John Gruber,
Raconteur, Daring Fireball

Michael Lopp,
Senior Engineering Manager,
Apple, Inc.


View Notes

  • Mentos box - the little tab makes it more than just a box, helps make it more useful
  • “Design is a present”
  • Apple + present - good at giving people presents to people who live to open presents on christmas
  • “Packaging porn” - when was the last time you saw an unboxing of a Dell product posted online?
  • “Designing for christmas”

Feedback @ Apple

  • “Fear of the color blue”
    • Color is tough, it has such a low point of entry for feedback - everyone has an opinion
  • “Fear of critics”
    • No barrier to entry on feedback of art
  • “Fear of ponies”
    • Q: “What is wrong with this icon? A: Steve Jobs as approved it, so nothing is wrong with it.”
    • “I want a pony” - if people that feel like they should be hard are not heard, they will blindside you
  • “References the spirit of the company”
  • Imagination is more important than creativity

Where to Start

  • Pixel-perfect mockups, every time a conversation happens. Makes a huge difference to put all the content in, then you can talk about something real.
  • Don’t believe in lorem ipsum, better to remove ambiguity, that does take a lot of work
  • Complete feeling for entire mockup
  • 10 to 3 to 1
    • Choose 10 good versions, bring down to 3, iterate down to 1
    • A lot of room to design in
    • Ex: Cultured Code - “Things”
  • Paired design meetings
  • Brainstorm (relax, no worries)
  • Pair down > Production meeting (how it will work, insanity to reality)
  • Brainstorm/pairing down meetings every two weeks
  • The Pony Meeting
    • “The meeting for the ponies”
    • Once every two weeks, roughly, fitting with brainstorm and production meetings
    • This is where the best ideas from the other two meetings (brainstorm and production) are presented
    • They have a place to say what they want to, and just want their opinion heard
  • Unexpected discovery - design as a present

John Gruber - “The Blood”

  • Everyone involved in design can operate under the notion that the better the design, the less resistance there is - not true
  • Ex: Beatles White Album cover - it was compared to “Meet the Beatles” at the time, and less preferred, but history regards it as a great, even classic design
  • A lot of people don’t want great design, it’s uncomfortable
  • Comfort vs. quality
  • “Better” necessarily implies “different”
  • Different = scary
  • “Exactly the same, but better” = “Exactly the same, but different”, does not work

The Plea Bargain

  • Want to go with great design
  • It always means taking a chance
  • Design that's “Pretty Good” can be guaranteed
  • “Don’t try to be original, just try to be good” - Paul Rand
    • Don’t create something good by trying to be original
    • Try to be good, will be original
  • LOGO - instantly digestible, perfectly balanced
  • Example: IBM logo
  • “A logo derives it’s meaning from the quality of the thing that is symbolizes, not the other way around.”
  • Example: ABC logo
  • “I could do that” syndrome - there’s a big difference between pushing keys and writing
  • What people think of as a great design
  • Idea matters more than talent
  • Apple logo - impossibly perfect bite - “original sin” - temptation
  • Designers are expected to be clever
  • Expect something more
  • “The wig problem” - If I’m going to pay all that money, I want a lot of hair (even if it doesn’t look real)
  • Design problem - “more design”
  • UPS logo - package tied with string (also, present)
  • 2003, new logo
  • Design to stand the test of time
  • “Design is making decisions, and packaging them for the test of time” -John Gruber
  • Saying “Wrong blue” is not designing, it's giving opinion
  • Not delivering a set of decisions, it’s the design
  • Alfred Hitchcock - didn’t shoot “footage for editing” - got final cut
    • Meticulously planned out (storyboarded) his movies beforehand, the footage only fit together one way
  • Henry Ford - asked people what they want - faster horse
  • You and your design are not the same thing, be able to talk about it objectively
  • Are you willing to be called an asshole? (in order to create good work)
  • Small logo vs. big logo - correct answer: no
  • Conflict is inherent in great design
  • All great designers have reps of being assholes (another ex: Stanley Kubrick)
  • More dedicated to integrity of your work, or what people think of you?
  • No. (is the most important tool)
  • It’s the only way to achieve great design

Wednesday, March 05, 2008

Farming, The Wright Way

Just the name “Frank Lloyd Wright” makes certain things come to mind. It might be words like “innovative” or “out of reach”. “Farming” is most likely not one of them, even though Wright himself worked on a farm himself during some parts of his boyhood.

My wife and I had the opportunity for a two-night stay at a wonderful bed and breakfast that was one of the only farmhouses that had been designed by Frank Lloyd Wright. Through a unique (which is an understatement, it's one of the only in existence) twist of history, the Muirhead House was built in the rural setting of Hampshire, Illinois and had fallen into a state of disrepair.

It has been lovingly restored to a stunning setting by Sarah Muirhead Petersdorf and her husband, Mike Petersdorf. (Sarah is the granddaughter of the original owners of the home, although I have to give a lot of the credit to the hard work of Mike, who also tends to the daily work of the B&B).

Among the goals over Frank Lloyd Wright's career was to complete structures that were accessible, usable and affordable (not all of these goals were always realized, of course.) The farmhouse was designed for a working farm and was designed as such. In fact, much of the correspondence between the family and the architect (or his assistant) is saved for guest reading – which makes for quite an interesting read.

Considering only about 500 of around 1,000 designs of Wright's were ever built, the Muirhead Farmhouse is a unique gem in a very small pool of potential providers. In my understanding, it's the only house that was designed as a working farmhouse. It's one of the only Wright Bed and Breakfasts in the world, and certainly the only Bed and Breakfast Wright farmhouse :-D

If you are within driving distance of Hampshire (a short distance north of Schaumburg, IL), and it happens to be a reasonable hour, call them right now and get yourself a night or two. You'll thank me later.



Driving up to the house (don't adjust your monitor, we did go there in the winter).



View of the main bedroom and front hallway from the dining room.



View of dining room down the hallway showing the dining room glass windows.



The house is designed on a 4'x 4' grid system. The dark terra cotta colored concrete squares that make up the floor are lit from above by pin lights that are centered over each square, except near the walls. The floor also supplies radiant heat produced from a system of heated pipes built into the floor.



At 176' (if I remember correctly), the house is a very long and features two elongated hallways. The front, which was uncovered in the original house plans and altered over back and forth conversation, welcomes into the house with long, full windows into the main living area.



The front hallway is mirrored in design by the front porch, the concrete grid carries out onto the patio and breaks into a brick border.



The hallway at the far end of the structure allows much less light in, which makes sense, since the majority of bedrooms are down this hallway. These rooms were originally designed for the children, of which there originally five, now three because of size limitations of the original design. (When I say size limitations in the original design, think of rooms for monks - very small rooms.) Mike and Sarah made the wise decision of slightly altering these walls to make room for three bedrooms down this hallway, which makes even more since they are now running the house as a bed and breakfast.



One of the smaller bedrooms.



Wright, using the same materials throughout the entire house, and in his Usonian (quite minimalistic) style, brings the materials in to form a unique shower. The brick used here is the (now rare) Chiago common brick, which is very porous and had to be sealed to ensure protection from the water.



Main living room with view to front lawn.



Fireplace (one of three throughout the home) in the main living room, complete with the signature Wright angled wide open face and angled back. (You can find some similar designs repeated in Taliesin and other properties.)



Other links of interest: