It’s over… my time in Austin, that is. I had a great time listening to live music, seeing friends and colleagues, and enjoying the city’s great eateries. Big cheers to the free buses (aka “Dillos”) that served our RV campground conveniently, though I must say the walk home was very pleasant along the Town Lake bike/hike path.
Three hip-hip-hurrays to the SXSW Interactive conference, also. It was great to meet everyone including: Dominique Lussier (Ottawa, Canada), John Mosteller, Christiano Prado, Grant Hutchins (newly of SpiceWorks in Austin, TX), Rob Grady, Dan Ritzenhaler and Ryan Johnson (Forty) and the good folks from SOMA FM (I told them that I love Big Al, their AI DJ and got a sticker!). James Archer and Nathan Smith—sorry we didn’t get to talk and catch up. I hear from lots of folks that attended this year that it was almost impossible to catch everyone for more than a “hello”, so hopefully we can connect again soon.
The conference has grown (a lot) since my first time in 2005. It’s good for the industry, and shows an enthusiasm that is contagious enough to bring the creative industry (aka Interactive) to the mainstream. The downside was some logistical issues at the conference center and a harder time meeting and talking to everyone. I’m thinking of skipping next year and going to a WDN or AEA conference instead.
Here are my thoughts, gripes, and notes:
Helvetica: Love it or Hate it
I had the pleasure of attending the world premier of the film Helvetica. It was inspiring, educational, funny, and elegant. Most impressive for a film about a typeface! Go see it if you get a chance. See the full screening schedule. (Also note Kottke’s review.)
Future Panelists?
Notes to all future panelist/speakers:
- Please post slides to a URI for later reference (and for those that didn’t make it to the panel)
- Please use a simple, not clever, title for your talk, and stick with the topic after giving the details to the SXSW folks. There were several sessions this year that seemed to promise A,B,C and delivered X,Y,Z; in one case it worked out well and in another case it was disappointing.
Sessions
Following are my notes and links from the sessions I attended. Like several other attendees, I tended to enjoy the one or two person sessions that were focused and well-prepared (as opposed to a fairly general panel that covered some ground but didn’t leave us with a lot of “take-aways” or solid learning.)
My favorites: After the Brief: A Field Guide to Design Inspiration (slides, podcast) and Web Typography Sucks. I liked both because they were superbly delivered, had great content, included valuable lessons, and covered areas that I need to work on.
Wishlist: Two sessions that I wish I had gone to are Writing, Better and Javascript: The Big Divide — both had great feedback and started good discussions. Can’t wait for the rest of the podcasts…
Reader beware, my notes below are “raw” and might not make total sense to you.
High- and Low-class Web Design
big question: do you design for yourself or your audience?
class decisions affect design decisions
if you AREN’T your audience, do you respect them?
- try not to be apart or other from your customer—if you do, you can cause damage
- evolution of design: move towards your audience, or bring them towards you?
- is bad design “bad”? or is it just different design? “new is threatening, the old is reassuring”
Power Session: Grids
tagline: “Grids Are Good and How to Design with Them”
dots are the basics, then grids. grids will an order to our designs and suggest how to find an order in things
history of design from ornamentation to modernism
- Paul Rand 1975 IWD report
- J. Müller-Brockmann: grid book
good examples:
- Massimo Vignelli — NPS brand across a multitude of applications and has a strong use of grids
- The Guardian (UK) grid design
requirements… constraints for the example site:
- 1024 by 768 screen size (really is 960 by 700 or 650)
- fit an ad unit into it (336px)
tips:
- grids are comprised of units (12 is the ideal number of units)
- use CSS box model as an overlay over top of the grid
- spacing add more spacing at the bottom of a word (the eye automatically makes the space equal)
- add 1-2px links between elements to help demarcate them
- split grid areas into combinations but vary the sizes to make it interesting
- force hanging lines: enforce where content stops and then starts again to show a visual break and keep things orderly
Decade of Style
(with Meyer, Holzschlag, Bowman, and Chris Wilson)
some favorite CSS properties:
- margin: could do this with HTML, you had to use spacer images and junk tags
- background: beautification
- clip: lesson on what can go wrong
important to CSS history:
missing pieces:
- layout language (complex)
- variables and constants
- WYSIWYG tools for web designers (next year’s panel idea: Should Web Designers Know How to Hand-code?)
Field Guide to Design Inspiration
Influence versus inspiration: recognize the value of your surroundings. Not just looking at at other similar projects. Great design is a result of your whole experience (and life)—example of Pablo Picasso parable: even a very quick result is a result of a lifetime of experience.
[Lady see Picasso on a bench in the park, and is very excited to meet him, and asks him to draw her portrait. He draws one straight line, hands her the piece, and says “that will be $50,000” please. She says, “Wow, I know your famous, but how could it be that much for one second of your time?” He says, “Lady, that painting that I just did took me 50 years to produce.”]
A. Meggs, “History of Graphic Design”
Reading history books on graphic design helps to have a background on the industry and where it has gone before.
tips and exercises
- turn off your computer
- practice traditional design: letterpress, printmaking, screening, etc
- this creates new ideas (like Jason’s business card idea)
- embrace your emotional attachment to things
- Jason: comic books and sci-fi covers
- storytelling
- puzzles, problem solving
- Rob: daily haiku
- crossword puzzles, wordplay
- flex your brain muscles
ideas/resources
- Allan Fletcher, “The Art of Looking Sideways”
- “Wordplay” documentary
how to maintain inspiration?
- Interact with everything in your life and be prepared for inspiration.
- Collect samples and photos (iPhoto archive, sketches).
- Be spontaneous.
- Be a design vigilante—take it back!
- Fix wrong design—redesign it!
- Find a muse: emotional attachments, bigger events in life
- “Dance like no one’s watching” (listen to “Writing, Better” podcast for more on this)
Web App Autopsy
(featuring: Wufoo, Blinksale, Feedburner, regonline)
how do you run support?
- Wufoo: Gmail with labels
- Blinksale: Sprout (Spout?) no phone calling, all emails
- Feedburner: forums, contact form or email issues, save issue in FogBug tracker
- out of 30 employees working there, 15 are actively engaged in support and feedback
- regonline: phone vs. email: they decided to use the phone since it’s better for building trust with their typical customer that likes to do things “the old way”; it creates a good feeling and creates referrals
- they also have a great knowledgebase which when it started decreased support requests about 30%
advertising
- Wufoo
- blog ads (on their own blogs) to build products with our brand
- click-through on free accounts form submit pages that sends them to the home page
- AdSense didn’t work well, only $100 from the month they tested it, and lots more came in after the blog ads on their own blog
- regonline
- switched the bottom footer logo from text to logo image and go a huge increase in clicks
- split tests to see what worked the best
- blinksale
- high conversion rate is due to people coming to them who need to get something done urgently (bill clients!)
- they decided to simplify their forms a bit (start with simple info first, then get the rest later)
- put up fewer barriers for users to get through
Design Patterns: Defining and Sharing Web Design Languages
create a shared language: if you know the name of something, you will be able to easily talk about things with others
a good pattern library replaces style guides
- they are more flexible
- good for sharing/communicating
- focus on solutions instead of rules
more:
- http://www.lukew.com/ff/entry.asp?347
- http://www.welie.com/patterns/index.html
- http://designinginterfaces.com/
- http://developer.yahoo.com/ypatterns/index.php
Web Typography Sucks
panel slides
read ALA article on EM and EN for reference:
books:
- “Chicago Manual of Style”
- “Grid Systems” by Josef Müller-Brockmann
some tidbits:
- “always use the best ampersand available” for headings and titles (usually the italic ampersand), example of SimpleBits ampersand usage
- lists aren’t traditionally indented
- punctuation also should hang off the left or right
- grids: use rational ratio of 2:3 or golden ratio 1 to 1.618
- 16px font size is the default setting for 90% of users
- masthead (headers): don’t set the size out of thin air; use the grid relationship to set it using the ratio used in the grid
- base the grid on your basic type size
- don’t use Arial as a backup to Verdana—they aren’t the same size
- specify every font for your sites, even fancy ones since those who have it loaded will appreciate it
- Helvetica Neue is a good face for digital media
- Richard and Mark recommend that we start using Vista fonts (Cambria instead of Georgia, for example)
- make sure to use quotes instead of primes (e.g ” instead of ")
Design Aesthetic for the Indie Developer
(Featuring: Lopp: Apple, Inman: Mint, Gruber: Daring Fireball, and Nick Bradbury: FeedDemon,HomeSite,TopStyle)
There is a blur between designers and developers; lots of people do both.
book: “Architecture of Happiness” by Alain de Bouton
Discipline: how to pare down your design? Example of Apple that throws away 80% of their good ideas and only use the very best.
Indie = Independent = design/developing for yourself and for users (not for business)
tips:
- have a group of peers and/or users
- Nick: he blogs and gets comments
- Shaun: has beta testers that give feedback
- John: uses his IM buddy list and and sends them questions via IM
- you need to have direct contact with people using the software; that’s why it’s not good to work for a big company
developing and dealing with mistakes:
- Shaun: rather than making up his inadequacies, he just repoints in a new direction and tries again
- Nick: make a first version, then throw it away and start over
- dealing with people who either hate or love your product: listen to the haters since they say what’s wrong with the product so that you can fix it
support issues
- Shaun: that’s usually the first big hire for a small or 1-person development team
- John: I only write open-source software, so it’s “your problem”, I don’t do support!
- Nick: has forums, blogs, and email contacts but has a support team at NewsGator
pricing: your instinct is to go too cheap (so charge more!)
- if you don’t have complaints about the price, you aren’t charging enough
- look at other companies that are succeeding and see what they are charging
- don’t start low and try to raise the price later; it’s a lot easier to lower a price later if needed
Bare Naked App
(featuring Mobissimo, dropsend, FreshBooks and another one that I don’t remember—panelists please post slides for your sessions! That way we can go to read your stuff and link to you.)
tips:
- often an app is cheap to build, but expensive to maintain
- try to own the tool (piece of software) that is essential to your business
- don’t outsource or use a 3rd party solution
- before you launch, ask “is it for fun or for business?”
- if it’s business, you will need to spend money to grow and scale
- if for fun, then you can start small and stay small if you want to
- have a business mentor: advisor, a person or people you’ve been involved with (maybe in previous work?)
- they will challenge you and call your BS
- two types of advisors: formal (gets paid) and informal (no pay)
marketing
- SEO, Adwords, public relations (PR is the cheapest way to get the word out about your app)
- PR should be done by the founder and by an external PR agency
- be as creative as possible
growth
- business apps are generally not viral so they grow steadily but stay stable
- social and “universal” apps tend to peak and have big growth all of a sudden
dev team
- keep it as a team, only e-lance or go overseas if you know exactly what you need done
- keeping it a small in-house team is more flexible since you can make quick changes
- they will also be more dedicated then a far-away contractor
customer service: invest more in how you are going to easily and quickly help people and fix problems (like cancel accounts, upgrade for free, give $ back)
Tech for Non-profits
(featuring the American Cancer Society team)
make sure to keep it real, open and accessible when communicating with your customers
example: Walmart hiring the Edelman PR firm to run their “RV Across America” blogs
- it wasn’t what it was cracked up to be
- they got burned and people saw it for what it was: “fake blogging”
- [personal note: Erin and Lance’s Travel Adventures, our travel blog was approached by the PR group for that Walmart blog and asked to endorse it… we didn’t, needless to say.]
internal tools
- del.icio.us: web glossary for internal staff (and link area, like an intranet resource list)
- GooTube: Google videos for spreading the message
- drupal for content management
ACS uses Second Life for a “Relay for Life” event in the virtual world. They raise money by taking donations in Lindens and converting it to US$. This event is the largest Second Life community event!
- Donate your design/development services at volunteermatch.com
- check out labs.cancer.org for examples of what ACS is working on
Growth of Microformats
Microformats have come a long way since 2003 when XFN and blo.gs started (and WordPress adopted rel attributes for blogrolls). They might look simple, but they are very strong. Microformats describe data that already exists on the web; there won’t be very many more microformats since the idea is to build on what is already there.
new Firefox extension, Operator, for looking at microformats in the browser
- it provides a UI for actually using the data that’s embedded in the document
tips and uses:
- rel=“me” for links that point to my sites
- rel=“license” for adding license data (copyright or CC)
- edgeio: aggregation of hList data (you can ping it from your site)
- go to kitchen.technorati.com for Microformat searches
- Alexa: you can use their contact search to look for hCards
- format all contact info in hCard
- WordPress plugin may exist for adding microformats to blog posts (I couldn’t find any, though)
- hListing: items for sale
- use the Firefox extension “Tails” to download microformats
already in heavy use on Flickr, Upcoming, Technorati, WordPress, SXSW sites, and many more
XMPD is similar to RDF triples (See also grddl: GRDDL is a mechanism for Gleaning Resource Descriptions from Dialects of Languages. It is a technique for obtaining RDF data from XML documents and in particular XHTML pages. From http://www.w3.org/TR/grddl-primer/)
Designing for a Global Audience
be aware of a site that “fits all” versus actually doing localization; also be prepared to think beyond localization.
local UI/design challenge example: Chinese like a densely packed design (material), i.e no white space since it seems like a waste to them
good examples online: British Airways, Nokia, IKEA
global: scalable, but have unique features for each region/country. think globally but act locally in regions.
nomenclature: don’t use metaphors that aren’t appropriate or don’t exist in other cultures
hire locally, don’t just outsource the design work. after local setup and formal communication is established, the process can start.
power of observation: always the best way to understand what the market is like (go there and see for yourself)
don’t make assumptions! know your audience. ask yourself: do you have empathy for the culture you are designing for?
EXAMPLE: low-bandwidth approach in Latin America (anything Flash-based or interstitial is despised)—keep it nimble.
managing multicultural teams
- face-to-face meetings are important
- do cultural research to be able to understand each other (communication, hierarchy, time zones)
Why You Should Ignore Your Users
user-centered design: it’s always good to know more about people who are going to use your app
You can’t always ask users what they want—you have to find other ways to get that information (since they might ask for things that don’t really want or need)
ways to focus on UCD
- write a story that details people, activities, and then design to fill those needs
- choreography: how people move through a space
agile development
- a lot faster than UCD
- sometimes you can get a product out and working quickly and successfully
- people will adapt to the technology
- if you listen to users: you iterate design faster when listening to trends (but ignore individual user requests because what one wants might be the exact opposite of another individual)
activity-centered design
- can be fast and make the product more universally acceptable
if you are pushing large UI changes, give the option of using the old UI for a while
personalization can be avoided by knowing the user needs and building the interface to server the majority of them out of the box (example of My Yahoo only being changed by folks less than 20% of the time)
Design Workflow
- get a Moleskine notebook!
- Sometimes interviewers take away your mouse to see if you are efficient with keyboard shortcuts within Photoshop.
[Note: While I didn’t take a lot of notes during this session, the web site that was created by the panel is very useful: http://designworkflows.com. Make sure to read the interviews and follow the resources links.]
Ruining the User Experience
How can AJAX can go bad? If used incorrectly…
UX = customer service
- understand your users and then develop/design to show that you DO UNDERSTAND the users and their needs
Levels of Service:
1. No frills: just the content, no styles or distractions
2. Dress it up
- visual design
- simple interaction
- brand elements
- Flash (aesthetics)
- alternate media support (print, mobile)
3. Make it sing
- AJAX (responsive interfaces)
- predictive data delivery (autocomplete, etc)
- customized user interaction
The Sensible Leader 