WebVisions 2006: Day 2 (Part I)
Here’s the first post from Day 2 of the WebVisions event. These first two sessions were absolutely fantastic. I have great notes from an amazing Design Panel, but they were hand-written because my battery was drained. I’ll get those up later on.
Bulletproof Web Design
Speaker: Dan Cederholm
Well, if you’ve been to this site before, you know that I’m quite the Dan Cederholm fanboy. So, it was great to see him speak (and introduce myself afterwards). This seminar went over ways to make your site less vulnerable to worst case scenarios (content adjustment, browsers, user settings, etc.). Well, I’ll avoid the gushing and go into the notes:
- Dan filled the room.
- Bulletproof =
- Worst-case scenarios
- flexibility
- Baby Jack - born premature
- Real life worst-case scenario
- Easy to worry about stupid stuff (diapers, strollers)
- A site visitor couldn’t read site with images off
- Used Faux columns
- Text was same as background color
- Fix: Include background color equivalents to background images
- Building in Salem - storage facility
- Built windows, but covered with cement
- Was this because they planned for future, thinking that it wouldn’t always be a storage facility?
- Bulletproof pants
- Tab slides in an out as your waistline expands.
- 3 areas you can be bulletproof
- Content - text sizes, content amounts (pants)
- Editing - content changes, maintenance (building)
- Environment - device/browser, scenarios (images off, etc) (baker’s dozen)
- Recommended from ALA: John Allsopp “A Dao of Web Design”
- Bulletproof arrow
- 4,362 ways to accomplish the same goal
- Solution #1
- make an image
- Solution #2
- CSS
- Arrow as background image, place text over it
- Not bulletproof (if text is increased, arrow does not resize)
- People really do adjust text size
- You’re not only testing text size, but adjustments in content amount
- Use relative text sizes with confidence
- Solution #3
- Flexible
- Easy to edit
- allows for varying text sizes or content amount
- Make the text a heading
- use a background image for just arrowhead
- Web design in a nutshell
- Ways that Work
- Ways that Work Better
- Ways that Don’t Work
- Bulletproof tabs (Cork’d)
- Absolute positioning - breaks if text size increased
- Double self-clearing floats
- Think Modular
- NetFlix
- They think in fixed height
- Use vertical sliding doors
- There is a breaking point (but can accommodate much more than before)
- Clearleft.com
- Dog ear on right - simple to attach
- Simple details easy to implement
- Odeo
- Rounded corners in top left and bottom right
- Reusable ornaments (Cork’d)
- Swash below text
- Same image, different widths
- Always centered
- Tundro, reusable line behind text
- ESPN search tabs
- Needed to hold number of search results
- Needed to go from image to CSS (to allow tab to expand)
- Microformats.org
- Hovering over unordered list items
- Haveamint.com - link treatment with background, two borders, and padding
- Cork’d - Icons attached to text links
- class=edit (each class gets a type of icon)
- Fixed vs. Fluid
- max-width, min-width (no IE)
- Frame by % instead
- Simplebits (maxwidth in center, % columns on side)
- Variable fixed-width layout
- Javascript checks size of window and adjusted styles accordingly
- Collylogic.com
- Bulletproof tools
- 10 second usability test
- Take away the design
- Is the site still understandable?
- Like an x-ray of the document
- Does the structure make sense?
- MLB=bad
- McAfee=good
- 10 second usability test
- Validation as a tool
- 100% validation is difficult to maintain
- Validation during construction is key
- Eliminates head-scratching CSS problems
- Firefox: Web Developers Tool Kit
- Safari: Tidy
- Bulletproof dashboard
- 10 second usability test (disable styles)
- Turn off images
- Validate
- DigDug Text Test (DDTT)
- The bulletproof concept
- The positive power of buzzwords
- Embrace flexibility
- Let go of pixel precision
- plan ahead for worst case scenarios
For Aptima: Well, this is one of those things that can only help design of all kinds.
About Interface: Designing for Lifestyle
Speaker: Kelly Goto
I hadn’t planned to go to any of the seminars at this time, opting to just wing it and see what looked interesting. I’ve seen Kelly Goto’s name around quite a bit, but knew little about her. I was glad I attended this one—she’s a great speaker. This talk was a lot about mobile technology, but also about ethnography.
- This is the year for US to shine or flop in mobile space
- “Getting inside the minds of customers is essential for ‘aha!’ moments that lead to innovation.” (Business Week, April 2006)
- Lifestyle and Innovation focused companies
- jetBlue, TiVo, Google, Apple
- jetBlue designed around what customers want.
- TiVO has an interface that fits in with how people actually live.
- Google GMAPS - people on the go know what’s near them
- Apple iPod - personality & lifestyle driven
- Apple & Nike (corporate giant mashup)
- jetBlue, TiVo, Google, Apple
- How can you design an appropriate experience
- Practical
- Emotional
- Ordered pretty coffee maker despite poor interface
- Worked until they “got it” because they were emotionally attached
- More than usable
- Are you emotionally attached to it?
- Do you think it is useful?
- Does it meet your needs?
- Can you integrate it into your life?
- Just because something is usable doesn’t mean it is meeting your customer’s needs.
- 3 takeaways
- See how large brands are incorporating lifestyle research
- Gain insight on the trends impacting our society
- Take away practical methods of rapid research incorporating usability and “deep hanging out” into your design & development process
- observe customers
- Ethnography = “deep hanging out”
- Research & Design
- Traditional: Research informs design
- Goal: Disciplines are merged
- Focus group/survey vs. Observation
- People are themselves in observation, not as much in a focus group
For Aptima: Not sure, but as we get into more productizing, we can see how to make our customers really get into our products. Our products are more like something they would use on the job, so perhaps there’s a way to make that a little easier on them.