An Event Apart: Boston, 2011 - Notes
written by Shoshi
(internet is down)
“We will attempt to connect you the the hive-mind as soon as possible.
Restrooms are out the door, if you need to go just raise your hand. Sorry, I
have young kids.”
-Eric Meyer
What Every Web Designer Should Know - A Better You at What You Do
Jeffrey Zeldman
@zeldman
- Everyone is a designer. (Shows a Myspace page)
- Social media came along, and now everyone is a designer. My 6 year old is a
designer.
- We’re really inventing application interfaces
- My 6 year old will see a pencil, then notice it’s only picking colors
- You may not be in control of the user’s visual experience
- For the next 60 minutes I cannot tweet. You can.
- Roger Ebert site not set up for reading reviews
- People are plane shifting or design shifting
- We used to design a brand experience
- Now it’s mainstream: Readability (Open Source), Instapaper
- Apple took Readability’s code and changed the fonts for their Reader
- What we’re designing may not be what users are seeing, this is a big shift
- Definitions are in flux, discussion is contentious.
- Job titles are different, the job a webmaster and a front-end developer do
might be exactly the same
- Among our community, we have the most rabid arguments about job definition
- “Pull it out of your… pull it out of the aether.”
- Whitney Hess wrote an article: You’re NOT a UX professional unless…
Design that does not serve people does not serve business.
- Classic example is make the logo bigger
- Or I don’t care what users think, change that color
- Used to be dictated by clients
- Now designers… the only way to talk the client out of it is data,
results
- It’s really up to us not to let the boss decide
- It backfires for business if you don’t think about the user first
- Zeldman: got spammed by Hashable
- Dark Patterns are Anti-Business
- We’re not gonna get 2 million users, we’re gonna get 2 million people
saying that we suck
- I’m never gonna use this service
- I’m embarrassed when stuff goes viral and I didn’t intend for it to
Content first. Without content… design isn’t just for decoration sake
- Twitter is a way to plant a thought
- Blogger hired adaptive path, to redesign blogger reached out to make new
templates
- Said you’ll get to make standards compliant templates
- Suddenly 20% of templates will be standards compliant
- Had no content to work with
- How do you design a template for anything?
- “Try to imagine this but awesome”
- Doug Bowman succeeded with template: Minima
- Nice template that works for any content
- Even he didn’t succeed at first, they didn’t like the first one
- Google being google said we know we’re not paying you much so can you do
one more
- He gave them a hour and this is what he came up with
- I wish I’d done this template, there are very few that can do what he did
- It’s hard to design without content
- People who came 5 years ago to learn about CSS, now come to learn about UX
and content strategy
- That we still have an audience says something
- 37 signals - why we don’t use Lorem Ipsum (article)
- All Websites are applications
If you don’t know what you’re designing, you can’t really design
- If we don’t have content, we make it up
- If you turn over a CMS and they put 700 words and break they layout,
you have to think about it again
You can’t solve the problem until you define it.
- You probably can’t solve it alone.
- User research, you do design testing OF users
- Silverback, lovely product
- Sometimes innovation comes from a different place, and sometimes you just go
with it
- Tweetie - Refresh by moving thumb up, since you’re one handed
- Suddenly apps that didn’t do that seemed old-fashioned
- Tweetbot - swipe left to find conversation, swipe right to find related
tweets
- A lot of people downloaded Tweetbot so they could argue about it, and learn
the new gestures
- The same people bought all 3 of our books
- Market research has been disproven, your presence validates it
- We all have to know everything. We all have to know what each other do.
- I’ve only met one person I didn’t get along with in this field.
- We all blog about our great idea. In advertising you keep secrets.
- We share with each other, it’s quite remarkable.
We all have interest in each other’s discipline, even if we’re not going to do
it
RIGHT NOW is the best time do create websites and applications
- Convergence of new technologies, new opportunities
- Webkit is in many ways experimental browser, also advanced
- HTML5/CSS3
Skills + Challenges
A Mobile vs. Small-Screen Strategy
- “Many times when we say mobile, we’re really talking about small screen.”
- Complexities of the layout are abandoned for small screen
- Do you need mobile or do you need small screen?
- Responsive web design
- The Huffington Post sure needs a mobile strategy
- If it’s Mobile is says, “Give me your location… there’s an HTML meet-up
around the corner!”
Real web designers write code. Always have, always will.
- I sometimes use twitter when I’d like to write a blog post but I don’t need
to. I can put it in 140 chars.
- Know the principles of semantic markup, you need to know what’s possible
with HTML5/CSS
- If you’re content you need to know how not to junk up the markup
- Everyone needs to know about progressive enhancement
It’s great to create an experience that works for everyone
- It doesn’t have to look the same
- We have permission, users are ok with that
- Adaptive Web Design - book
- Any necessary page component should work without JS
- LOOK at: Progressive Enhancement Checklist
UX and Design are not antonyms
- Design Principles of HTML5
- “Pave the cowpaths”
- Pave the place where people jaywalk
- Find out what people do and make sure that it works!
- “Make sure that people know what they’re supposed to do, and if they don’t
do it, make it work anyway.”“
- Fail Predictably
Beyond Outline Documents
- CMS strategy “article” and “section” elements
- HTML Built on top of delivering college term papers
- Looking at what people are using, make it part of the markup
- Audio & Video, seems silly to use JS/Plugins if everybody uses it
- Strategies for HTML5 Today
- Doctype is the new lunch tables, many using 5
- JS shim for HTML5, Jeffery says YES
- Seen Vector art in browser
“I just want to close by sawing Andy Clarke in half.”
Design Principles: The Philosophy of UX
Whitney Hess
@whitneyhess
- We talk about methods, deliverables, process
- UX is the establishment of a philosophy about how to treat people
- Visual Design is the establishment of a philosophy about how to make an impact
- Contrast
- Emphasis
- Variety
- Balance
- Proportion
- Repetition/Rhythm
- Movement
- Texture, on the web it’s implied
- Harmony
- Unity
- Why principles? Consistency, constraints, shared vision, objective evaluation
- Are they telling the story you want to tell? Is the design good
- Good design does not equal good experience
- How do we measure the effectiveness of designs over time?
- Good design can equal good experience
- Propose a set of design principles for designing experience
- Personal Mantra:
- Stay out of people’s way
- I collect design fails
- WIN, reserve parking for certain activities, and let you know how long an
activity might take by giving you an estimate
- Tumblr landing page: education, signup, page adjusts
- When someone is on a mission, don’t have interruptions.
- Pave the road for an easy experience
- Create a hierarchy that matches people’s needs
- Thermostat plate, BIG for seniors
- Mint.com - dramatic font sizes used to highlight crucial elements
- Taking into account how people are approaching the page
- Giving the most crucial elements greatest prominence
- Prioritize, commonly items easy to reach
- Limit distractions
- Condoms w/ Pregnancy tests next to each other, fail
- France: condom vending machine outside the pharmacy, use when store is
closed, WIN
- Myth that people can multi-task
- Wanderfly
- CONSECUTIVE steps
- Provide strong information scent
- Tropicana redesign, not distinct enough visual difference between flavors
- Beauty store has entire product inventory listed on a decal, WIN
- Quora WIN: Auto complete
- People do not like to guess.
- If people don’t find what they predicted, they’re going to go somewhere
else.
- Provide signposts and cues.
- Unlabeled array of doorbells photo. FAIL
- B&N WIN: lines on the floor, guide at the front of the store will tell you
what color line to follow
- Neiman Marcus WIN:
- Everything is appropriately highlighted
- Very clear where you are
- Never let people get lost
- You can go in an infinite number of paths
- Show them where they came from and where they’re going
- Provide Context
- “Back in 30 mins” when did they put the sign up?
- Cash register says they’re required to charge VAT, “VAT Nightmare”
- Provide it at the exact right place, and communicating openly, WIN
- AirBnB, Communicating how everything interrelates, self-contained
- User constraints appropriately
- If toilets can’t handle toilet paper, get new toilets, don’t ask people
not to flush it.
- Airplanes
- locked door => light goes on
- Using constraints to your advantage and to theirs
- Preventing error is better than recovering from it
- Stop people from going down the wrong road
- Make sure the constraints are worthwhile
- Make actions reversible
- Bad tattoos, permanent
- If someone goes down the wrong path, make sure it can be reversed
- NY lever voting machines allow you to undo until you pull bottom lever
- Paper ballots, it invalidates your ballot if you make a mistake
- Remember the Milk - complete an action: notification and undo button
- Contingency plan
- When people make mistakes, make it easy for them to fix them
- Provide feedback
- Asthma inhaler: you don’t know when your inhaler is empty
- Baking cookies, when there’s a little bit of wax paper left it says “Time
to but cut-rite (the brand)”
-Love it
- Hipmunk - loading screen has a tip for how to become a better user
- Design is a conversation not a monologue
- Make a good first impression
- Two handles going the same way that have both “pull” and “push”
- Restroom with a mission statement: clean & healthful environment
- Not that clean in reality
- But it really wanted it to be, it made me more tolerant
- Vimeo: best first time UX, “Welcome, you’re new aren’t you?”
- You don’t get a second chance to make a first impression
- You can make people feel comfortable, set expectations
- Ensure that they can see themselves with you for a long time
- Basis: Persuasion
- Logos
- Pathos
- Ethos
- Balance of knowledge, empathy, and ethics
- Universal principles are not enough
- Companies have publicly shared principles
- Starbucks “embrace resistance”
- What are your company’s principles?
- How will we know when we’ve achieved them?
- Steps for crafting them
- 6 Questions to ask yourself
- When to use them…
- UX is the establishment of a philosophy about how to treat people
- Help people make their lives better
The Experimental Zone
Veerle Pieters
- There’s no straight answer to how I end up with my colors and patterns
- You just start trying out different things
- Experimenting is Key
- “Inspiration exists, but it has to find you working.” Pablo Picasso
- Seeming complexity, simple to do
- Try different values and colors, end up with something you like
- I don’t always have a specific shape or design in mind
- Maybe 99% of the things are not what I was looking for, but 1% will be exactly
that
- Not that I have it clear in my mind, I just start and create, and eventually
you can end up with surprising results
- Reflection of similar designs
- Fantasm(?) Studio CS Plugin, pure experimenting
- “It’s OK to try out a dozen of versions”
- Edit + got control over each color, takes more time, achieve better results
- Small experiments, try to spend 15 minutes everyday on something creative that
has nothing to do with work, just to have fun
- I can always come back to it later and use it in a design or a website
- “I try out something, I see if I can go further with it, and if not I go back
to the initial starting point.”
“Suddenly you have that and you say hey, that’s it, that’s what I was
looking for.”
Sketches & Doodles
Creation of Mood Board
- Can really help you to get you started and have that ignition of inspiration
- I initially built this inspiration gallery for myself
Inspired by shapes and the idea of the chameleon for Adaptive Web Design
Let’s Experiment!
- See how it goes into practice.
- Draw something exactly the same
- Let it rest for a few days
- Draw it from memory
- You end up with something that has your own design elements
- First sketch I thought was the strongest
- Saw cubes in the shapes
- I didn’t know what the end result would be, but I tried things out to see what
was interesting
- See if it’s getting better or worse (as you go along)
- Saw the background had dashed lines that had a very subtle pattern
Modified to create some randomness
With CSS
- The Cicada Principle by Alex Walker (article)
- Use prime numbers in design
- Use for background design
- Creates a random stripes patter with multiple background
- Curtain background
- Build from the smallest
Demo: http://duoh.com/varia/cicada
Practical Tips
- You never know how much time you will spend
Small lifesavers
- Name your layers
- Disable add “copy” to layer, uncheck “Add copy to Copied Layers and Groups”
- Fix shifting pixels by setting the point of origin to the corners
- Pasting Illustrator => Photoshop as shape layer, make exact dimensions
- Tych Panel by Reimund Trost
- GuideGuide by Cameron McEfee
- Extensible Baseline Grids
- For kerning, do a test, tweak the letters, start playing around and see if
the kerning is still ok. Put the text up-side down, edit, flip back.
Conclusion
- Forget the technical boundaries, to fulfill my full creative potential
- In case I create something that is not executable, you can then take a step
back
- This is how you think of newer ways to get creative stuff done, and make newer
things.
- If I’m too restricted, it might block me a bit
It’s like a little bit of the grey zone in between of what’s possible and not
(it’s where I like to work)
Color Management (Europe)
- Calibrate your screen, System Prefs
- Setup Color Management for your CS
- Edit color settings: RGB Adobe RGB, CMYK FOGRA39 (ISO 12647-2-2004)
- Grey/Spot - dot grain 15%
- For Web - temporarily use sRGB
- You can check “Ask when opening”
- Always best to ASSIGN a profile, will be adapted to your working environment
- Edit > Suite Color Settings, Synchronized… Choose your custom profile
- For Web: Assign Profile - sRGB
- Export = ^_^ no color shifting
Mobile Design Moves
Luke Wroblewski
@lukew
- BagCheck - stealth startup
- (Audio!)
- I like data, and I like being informed about things.
- (Dance break!)
“Small new moves can add up to very big things.”
Why do I need new moves?
- Things are different in mobile.
- How do we get our clients and bosses to care
- PCs vs. Smartphones
- Predicted that in 2012 global shipments of smartphones will exceed desktops
- laptops
- IT HAPPENED Q4 2010, 2 years early
- We hear outlandish predictions, and it happens faster
- Everything we thought was going to happen is happening faster
- Personal computer usage has decreased 20% between 2008 and 2010
- Why? Smartphones and Tablets
- PC is mislabeled, the PC is the thing that’s in your pocket on all the time
- 36% increase on gmail usage mobile, -7% desktop
- 40% all tweets sent via mobile Twitter
- 16% of new users start on mobile
- m.twitter.com/ is the 2nd most popular way to tweet
- More use of native apps drives more use of the web
- 600% growth in traffic to mobile websites 2010
- Average users visit up to 24 sites/day on their phone
- Top 50 sites are only 40% of traffic
- Even if you have a native app, people who don’t have that app will go to
the website
- “Just to see a picture that Jeffery posted, do you want to download a 20MB
application? No.”
- Native apps vs. Mobile web, not an either-or situation
Mobile is Different
- Desktop experience has various environmental variables
- The desktop is like diving, mobile is like snorkeling, in both you’re
looking at fish, but the experience is different
- Mobile: small screen, battery, inconsistent network, fingers, sensors
Why are we mobile?
- Stereotypical businessman
- My wife is using it doing chores at home
- Standing in line
- WHERE: anywhere and everywhere
- WHEN
- desktop: 9-5, dinner break after
- mobile: spikier, shorter intervals, anytime
- iPad: used on the couch and in the bedroom at night
Mobile is different
- technical capabilities + limitations
- times & behaviors
- anywhere + everywhere
- ergonomics, form factor
Organize Yourself
Navigation elements
- Waaaay too many nav bars isn’t usable, 5 nav headers is too many
- small touch targets are a challenge
- design for touch
- Nav GRID, easy
- Inline menu, not as simple as it could be
- Bottom of the youtube page = dead end, they’re missing out
- Have a menu at the bottom to send you somewhere else
- Arrow at top to get to the menu at the bottom
- At the bottom put an arrow to go back to top
- Simple, anchor links
- Navs, avoid excess
- Nav at the end allows you to explore
- Bottom menus = easy to hit zone
- no real fixed positioning on mobile
- don’t put extra menus on the bottom
- they now eat up screen space, yahoo mail I can only see 2.5 messages
- Physical (hardware) controls are below the screen, when you lock nav to the
bottom, people mis-tap
- Different hardware and interfaces on different phones
- Don’t have back on your mobile app, there’s back in the browser, it’s
confusing
Input
- it’s hard to do, so they say
- Yet, 4 billion text messages sent per day in the US
- 1 in every 3 teens sends over 100 messages per day
- Actively encourage input on mobile
- Make it easy so we can get accurate input
- “Super friends of input”
- Use onboard elements, optimize for the device, standard input control
- But sometimes it breaks
- 8 drop down menus… 4 tap operation for each
- Kayak has spinner controls (+)
- date picker, big fat touch targets
- Hopefully later on, these things will become declared in the languages
- HTML5, number, range, date… easier on mobile
- Make it easier to provide error free input
- input type = “email”, your phone will give you the right soft keys
- turn off auto correct and capitalize
- Phones were meant to input numbers!
- Input masks, locks a format into the structure
- “s** @ me.com” has to end in @me.com
- Don’t format after the fact
- AVOID the gradual reveal, don’t make it a big secret
- Set correct expectations
- Don’t put answers in the field
- Make it look like a question
- maintain format
- Take advantage of standard inputs
- Small things: types, attributes… they add up!
- Consider input masks for formatting accuracy
- New things are happening in mobile web browsers for input
Ask for it
- How we ask for questions…
- Field zoom in mobile safari, apple gets credit, they put in some nice little
touches to try and make things better
- On google, tap on the field, since the label is left-aligned, the question
goes away
- top aligned labels work better here
- PPK has a bunch of great articles on this
- Labels within input fields?
- HTML5 placeholder… if you tap on it it goes away
- 37 signals keeps it there in light grey, light grey is good for question
vs. answer
- not always the best, but good at pushing things forward
- Top-line labels are the best currently
- Tell mobile web browsers you’re designing for them
- Labels within input fields, need more care and attention
Opportunity
- Mobile is growing so quickly, it’s been 4 years since the 1st iPhone was
launched
- Android became capable at the end of 2010
- Come up with new stuff
- No checklist exists
- Smart people working hard to figure it out
- Like an upcoming zombie apocalypse
- Scary + awesome
- we can make our own moves
- Drag to reveal
- Pull down to refresh
- push towards natural user interface
- Content is the UI
- Windows, Icons, Menus, Pointers
- Opportunity for direct interaction not abstract controls…
@globalmoxie “Can I do this without a button?”
- Move device to where you want to see
- Scary time, happening so fast
- Recharge the web
Organize Yourself, take behaviors people use, ask why, marry that with content
- Content first, navigation second
- avoid iOS paradigms of web browser
- Make it easy to accept input
- Pay attention to how we ask for input
- Opportunity to create new things
http://www.lukew.com/
The Responsive Designer’s Workflow
Ethan Marcotte
@beep
- My grandmother, born in 1910, gave me 3 books… her father’s diaries
- 1893, 1884
- Care and design, Almanac info
- Blank pages he filled out
- Short, declarative, most deal with the weather, imperfect
- Visceral experience of reading them
- Importance of storytelling
- Sharing these minutae… twitter… art form
- Paradox about newspaper, important for 1 day, fleeting & permanent
- Hold a connection to a previous date
- Nearly half of all adults get local news on a cellphone or tablet
Instead of fragmenting our content embrace flexibility, see it as a strength
rather than a limitation
What is responsive?
- Flexible Grids
- media queries
Boston Globe redesign, responsive design
What makes a design responsive?
- “design is the method …” Rand
- “design is the stuff around the end result” - Mark Boulton
Tempting to see it as Visual Design & Interaction Design
Part of the problem? A task centric approach
- Discover > Design > Develop > Deliver
- Linear, conveyer belt thinking, “hand-off”
- Design + Develop go together with Responsive design
- At some point PSDs stop scaling
Tools
- PSDs, enter a width and height
- baggage inherited from printed page - Jason Santa Maria
- fighting issues of process and tools
- collaboration, voltron-esque team
- Unified design pod “design-velopment”
- Note: he wants us to come up with another term here
The pod convenes
- Designers introduce, developers ask a lot of questions
- Ask about content, how, why
- How might the layout adapt?
- What’s the most important piece of content?
- How does the interface adapt?
- We don’t necessarily need solutions
- Trying to understand the design process, and expose issues
- What value does this have for our mobile users?
- MOBILE FIRST -@lukew, narrower screens force us to focus
- Merlin Mann… noise to noise ratio… which part of the screen do we
care about?
We drown our content in stuff nobody’s interested in (and ads)
A question of context: mobile vs. desktop
- Mobile is an environment you can’t control
- Desktop: comfortable, focussed
- 80% of mobile used during misc. downtime
- 31% of mobile buyers shop while watching TV
- We need to adapt to our prospective audiences
- These devices offer us choice
- Context doesn’t (necessarily) determine the users intent
- We associate mobile with something that’s less capable
- Mobile is actually a commitment to the content that’s on the page
- Creative review process
- Everything that’s displayed on the page deserves to be there
- Cultivate readers who can experience the site no matter where they are or
what device they’re on
Mobile first = content first
Measure twice cut once
i. Prototype like the wind
ii. Flexible grid
- target/context = result
- target with of element / with of containing element = percentage for CSS
633/960 = 65.9365% … don’t round just stick it in the CSS
- Flexible Images - resize proportionally
img {
max-width: 100%;
}
https://github.com/filamentgroup/Responsive-Images
- serves up images based on device
iii. Media Queries
- List of resolution break points
- 320 portrait, 480 landscape, 768 tablet, 1024 desktop, 1200 widescreen
- Media queries, are conditional comments
- https://github.com/scottjehl/Respond
- JS
- /*/mediquery/
- Don’t have specs for each breakpoint
Designing in the browser
- The interactive design review, see if we’re on track as a team
reconvene, dump a bunch of devices on the table and go to town
VERIFY
- how well does the layout adapt?
- do modules still feel usable?
- do any elements need additional design direction?
- Refining the masthead… “design to code and back again”
- Design recommendations not a final piece of artwork
A flexible foundation is key for responsive design
- Adaptive VS Responsive
- Revising the breakpoints… some devices don’t fit
- Added 700px, didn’t have to recode for new width
- Means consistency and less code, too
“Anything worth doing is worth doing right”
- from prototype => product, refinement along the way
- Content for all, but an appropriate experience
- “There is no mobile web” (article)
- The mobile web allows us to revisit accessibility
- Access to quality content
- Responsive layout meets mobile first
- Default is small screen friendly, and then add complexity as you approach
desktop
- Scale UP not down
- concatenate the stylesheets
- IE sees basic + IE css
- Other browsers see Basic + CSS … media=”only-all” omits devices that don’t
support media queries
- Testing before we enhance
- if @media support OR IE => basic
- everything else => enhanced
- is this enhanced? touch? have local storage? what’s your screen width?
- touch device => load some JS
- drop in enhanced.js
- competitive with other mobile based experiences
- a little heavier, but more content
Ask: Is this content or enhancement?
- font-face?
- some are heavy
- sometimes you don’t see content until font has been loaded
- hard cutoff, if over 480… load font-face
Over the river and through the woods..
- “Never trust a man wearing a tie”
- These techniques are somewhat unique to us
- Mobile sites vs. responsive sites
- Plenty of room in the pool, it’s not one VS the other
- Designer expression
- we’ve been butting heads between idealism and realism
- Artists have been accused of imposing their ideas
- Reality can get upgraded
- It’s about YOUR AUDIENCE
Q&A
- ads- iFrame, quarantine height
- Layout rounding errors with percentages, usually looks close enough
- Preferences to the user for font-size
- Text-size with ems
The Secret Lives of Links
Jared Spool
@jmspool
- “The Most Important Story” on CNN
- Links tell the story, the links are what users come to the site for
- Links live to drive their user to the content/desired objective
- The essence of the website from 5 years ago stays the same
- Links serve a purpose… get people to the content
- Users came for “What is happening right now?”
- The words make a difference
- Content on the site talks to us through links
- Links represent the content, if it’s well represented users find what they’re
looking for, if links are poorly represented, users don’t find what they’re
looking for.
- “The Scent of Information” links tell users how to find content
- Use links like a Fox hunts a rabbit
- People looking called “informivores” like carnivores
- What the site owners insist we put on the site is different that what we
want to see
- Walgreens website
- 21% of users on Walgreens go to photos
- 16% search
- 11% refill prescriptions
- 6% pharmacy
- 5% finding a store
- = 59% of total traffic
- those links are 3.8% of total page area in pixels
- Fitts’s Law, 1954: The speed a user can acquire a target is directly
proportional to the size of the target and indirectly proportional to the
distance from the target
- The bigger and closer, the easier to hit
- Things pushed on the user because the business wants this stuff
- It’s not helping, the user gets pissed off
- We’re using the real estate poorly, and it gets us into trouble
We want to give users links that communicate scent in a clear way, and making
sure the real estate is proportional to the users
People come to a website for a reason
- They don’t go there just to see what the website does
- A small group does, they’re called designers
- “Trigger Words” A word or phrase that matches the user’s goals and signals
where to click
- Gets them where they want to go
- Don’t want to click on things and get to the wrong place
- This is essentially scent
- It’s easy to know when scent is bad
- BACK button
- Pogo sticking
- Using search
- Clickstreams overall: only 42% succeed
58% of the time people don’t find what they’re looking for
Failures
- Back button
- a single back button = 82% failure
- 2 back button clicks = 98% failure
- “The back button is the button of doom.”
- Repeating it together, works in the south they’re church goers. In DC, we
tried it 6x and nobody could say it together. They just can’t get in sync
down there.
- Like foxes circling back if you can’t find the rabbit
- Foxes succeed because rabbits are stupid
- Users go back hoping the page will be different when they get back there,
but it’s now
- Pogo-sticking - going back and forth between a main page
- Gallery page => any of the content pages
- Goldilocks phenomenon
- They don’t find what they’re looking for
- success w/ pogo sticking = 11%
- 66% of all purchases on e-commerce happen with no pogo sticking at all
- If they’re pogo-sticking, you fail
Only 3 ways you can get to the content you’re looking for
- Search, Categories, Featured Content
- User comes to a page
- Scan the page for trigger words
- If I find it, click on it
- If I don’t find it, search
- On Amazon they go straight to search, Amazon has trained people that
nothing on the homepage is ever useful
- B.Y.O.L - users type in their own trigger words, make them links
- They’re creating a link
- Pro tip:
- Your search logs are completely filled with trigger words
- Match the search phrases up with the pages users search from
- Put that content on the page they searched from, probably the one before
- User’s don’t want to search, the design on the site causes them to search
- without search = 53% success
- with search = 30% success
- 7-11 Milk Experiment
- Find people who need products, give them the cash to buy the products
- 13 different apparel websites
- Ideally for every $1000, if the site works, they should spend $1000
- Best performing - GAP, $660
- $465 - Lands End
- $156 - Macys
- $63 - Newport News
- Number of Pages to Purchase (homepage => put first product in their cart)
- GAP - 12
- Lands End - 16
- Macys - 51.2
- Newport News - 51
- What was happening: back button, pogo-sticking, search
The designs we create force us to do this
- Cluttered is a word people use when they’re looking at content they don’t want
- You think this is cluttered because you’re not shopping for a camera right now
- Clutter is relative based on your level of interest
- At what point do you click on a link not expecting to “Learn More”
- we have an alternative “click here”
- I don’t have a lot of good examples
- It’s hard to show you good examples because you’re not looking for something
right now
- Good design is invisible - you don’t notice the air conditioning until
something goes wrong
- We don’t complain about good design, because we don’t notice it
- Embed your links with text
Cancer.gov, better business bureau => good examples
Emit the right scent
- Links secretly live to look good, while still looking like links
- “Links are supposed to be blue and underlined” was the belief
- We couldn’t have made a worse choice
- The people at CERN decided
- Blue is the hardest color to read
- Men loose their ability to read blue at 40.
- Women start to loose their ability to read blue at 55 because women are
better.
- Underlined words are harder to interpret.
- It’s ok now to have “links of color”
- Sometimes we take it to far, where it’s hard to tell what’s a link
- “The user has to wave their mouse around on the page, waiting for the
browser to give them the finger.”
- Drudge report makes it clear what’s a link
- Changing vocabulary as we go, confuses users
- We have to establish clear visual vocabulary
- Don’t want them to fade into the background, they are the most important thing
on the website
- Do what the user expects
- Giving links you halfway through the articles = :(
- Users don’t move their mouse until they know what they’re going to click on
- hard to see hidden content
- they moved their mouse already and they want to click, but now there’s more
stuff to read
- sometimes there’s no way to know what to click on
- sometimes you play cat and mouse with your drop-downs
- I have not idea why these exist:
- Chase online banking has “see fewer choices”
- “more info our lawyer make us put here”
- Yale Art website “Everything else”
- “Beautiful montage of backgrounds to make sure you’ll never read again.”
- “Ladies and gentleman, thank you very much for encouraging my behavior.”
The CSS3 Anarchist’s Cookbook
Eric Meyer
“The tweeting will continue until morale improves” -Zeldman
- Ways to do crazy stuff with CSS
- If you’re going to be an Anarchist the tools you use will blow up in your
face
- MOZ: you can specify an element on your page and make it the page background
- need obj, oriented CSS
- maybe usable for canvas elements
- Note: he uses BBEdit
- white-space: pre-wrap;
- handle whitespace as if it were an element, but wrap the line
- 2 spaces
- any line breaks get included
- useful for song lyrics and poetry if you have indentation, but still want
page to wrap
- constrain to elements you’re actually dealing with
- :hover { opacity: 0.5 !important}
- set as someones user stylesheet, it will drive them crazy
- opacity layers in the stack
- gives you a clue to see what the browser is going through…
-“So, pity the poor browser”
- it has to check the entire document on hover
- inverted
:not(:hover)
- “it makes information discoverability a lot more interactive”
- “I can crank this down a bit, if I want to make it a real choose your
own adventure…”
- CSS is now more powerful and capable of blowing up in our faces
- :not
- interesting: select everything in a field set that’s not a type of text
- can only give it one thing
- :not(:hover):not(p) {}
- anything that’s not a checkbox or radio
- “This syntax makes my eyes bleed”
- a:hover {
opacity: 0 !important;
visibility: hidden !important;
}
- link on click will go away and come back
- Something resolves one way and then resolves the other
- :nth-of-type
- give every other paragraph font-size of 90%
- applies to elements that share a parent
- first/last child, immediate assumptions to what they do is not actually what
they do
- :only-child
- a:first-child
- means select the first child of its parent
- to select first element in a list - li:first-child, NOT ul:first-child
- a:link img {}
- outline
- for privacy reasons browsers are ignoring tons of visited styling
- you can only change 5 properties on visited-links
- border-color, outline-color, background-color, …
- for evil governments
- anything that will change the background or cause something else to be
loaded
- when CSS says red, in js the DOM will report back red, even though it’s grey
- “If you’re having trouble styling visited links, think privacy”
- Older browsers won’t do this
- *-transform: rotate();
- you can turn links upside down
- “You can also localize to Australia” (flips the whole page over)
- you can do rotate(0), declaration rotate(180deg) can also use radians
- 0 is not as universally unit-less as has previously been assumed
- Safari DOES NOT transform inline elements
- change display to block or inline-block
- Mozilla has “boldly charged ahead” either to a brighter future or a
territory where angels fear to go
- vector fun, rotate gracefully over time
- If you do it for long enough or slowly enough, your browser will crash
- “Would you like to report this? I was like, do I admit to them what I was
doing?”
- User-driven, long term animations that are interruptible: Safari may take
the remaining time to rotate back
- when you rotate everything on the page, everything on the page establishes a
containing block
- be careful with absolute positioning and transforms
- creates a containing block
- creates a z-index stacking context
- In FF, outline and border rotate differently, Safari does fine
- “I can’t say Firefox is wrong, I can say I don’t like what it’s doing.”
- Triggered on hover
- transitions can’t be auto triggered
- transition does happen if not on hover
- “That’s the deal”
- You can use keyframes
- Keyframes can be auto triggered
- FF 4 doesn’t implement keyframes, the Aurora 5 beta does
- 0 vs 0s, add the units for time
spinner 36s 2s …. the last number is the delay- 36s 0, Aurora will ignore the declaration completely, doesn’t understand
unit-less time, have to add unit-identifier
s or ms
- if you want to see who’s using HTML5 elements, setup a user stylesheet with
outlines for HTML5 elements
- cufon, every word is a canvas element
- video[autoplay] {display:none;}
- rich vein for progressive enhancement
Q&A
- Doesn’t balance browsing with a user stylesheet, vs what the end users sees,
just uses it for showing himself info
- Push it as far as you can with CSS3
All Our Yesterdays
Jeremy Keith
- “Tomorrow, and tomorrow, and tomorrow” - Macbeth
- Everything changes so fast on the web
- It’s amazing how fast things move
- Think about time in a longer sense, larger lens
- Long-term stories
- Web is made of two things
- Flow is the feed - updates
- Stock is the long term stories
- “We ignore stock at our own peril” @ twitter team member
- Creating a reservoir of our own personal story
- Other industries
- Svalbard seed factory storage, Millennium global seed bank project
- Radioactive waste
- “what we do when something is dangerous, we slap a sign on it”
- in 1000 years we can’t rely on writing and iconography
- how to design a future proof warning message
- transform the land itself to make it menacing
- You start to see your own life and culture differently
- The Long Now Foundation
- Stuart Brand part of every major 20th century innovation
- Time from the stars, pub 1956
- Clock of the long now, designed to run for 10,000 years, chimes once a century
- To actually start thinking about this stuff, you have to start building it
- Has to scale
- the actual clock is quite large
- geologically stable place
- Sent gold record into space, message in a bottle
- map uses pulsars
- contains instructions to build a gramaphone
- “If you were putting together a voyager record what would you put on it?”
- Analog not digital, durable
- Digital is awesome
- Ease of making non-destructive copies, no cost for duplication
- The web is “small pieces loosely joined”
- Common understanding that the web is carved in stone
- sounds plausible, but it’s not true
- we latch onto stories, we like stories
- We’re building on sand
- “Digital Forgetting” there was a book saying we had to build forgetting into
the internet
- Fundamentally this is a problem, if we’re trying to leave a legacy, and tell
a longer story
- Things don’t last more than 10 years on the internet
- http://www.longbets.org/601 02022-02-2
- 11 years the URL structure will not survive
- I will accept a redirect to the resource
- I would love to be proved wrong
- We don’t own our URLs
- If your only photoalbum is facebook… since when has a free service given a
f*** about keeping your stuff?
- Many services have closed
- “Geocities is an awful ugly decrepit mess, and this is why it will be sorely
missed.” -attrib?
- Geocities closed, and we lost
- Archive Team, went and archived 2TB, most of it
- Over 10,000 outbound links from Wikipedia to Geocities, broken
- Yahoo didn’t even back it up, just threw it away
- Hosting is costly, and nobody’s visiting… incompatible statements
- Pownce was acquired, and then got shut down
- I had a pro account, they gave you a free Vox account in sept 2008
- Vox shutdown in 2010, and took 7 million URLs with it
- Magnolia, a technical issue wiped out my links
- Moves to delicious — yahoo was “sunsetting” it, youtube founders bought it
- I’m hosting my own stuff, and I ping out to external services
- Self-hosting flickr is harder
- Hosting your own content is hard, still in the realm of the geeks
- 3rd parties offer ease
- We don’t OWN URLs, we RENT them
- all the things that make the web great are decentralization
- there is centralization in the area of domain names
- Perhaps we don’t use domain names at all
- IP addresses, we give them machine numbers, we’ve been using phone numbers
- Personally, I want to keep my domain name, but it’s still not permanent
- What formats?
- BBC - domesday book, they created a digital version… but they put it on
laserdisks
- physical book has lasted 1000 years
- “Stone. Stone is good.”
- It has information about the information
- Same passage in 3 languages
- “Glass House” (book)
- Text formats are inherently more durable because they’re simple
- make sense to humans and machines
- Binary data (images, video, audio)
- we can’t parse them visually
- our machines may not always be the case that computers can read them
- PLANETS Foundation, took a bunch of different formats
- put them and the way to decode it and put it in a mountain
- it’s an actually place, looks like James Bond
- “It’s an awesome place. I want to go to there.”
- HTML will be readable in 20 years, safe bet, remarkably durable
- It’s good enough, kinda messy
- Semantically rich
- Everything should never shut out earlier versions
- If older versions were valid at the time, they’ll still be readable
- HTML5 is not about the shiny stuff, but about getting our data back
- Copyright
- locks down your data, decreases that it will be shared and last
- started at 14 years, in 1909 extended to 28 years
- you can renew it, or it lapses into public domain
- 1976: life of the author + 50 years
- 1998: life + 70 years
- 50th anniversary of the death of Walt Disney
- anytime Mickey might be released from copyright with”Steamboat Willie”,
copyright gets extended
- “Accelerando” (book)
Combine restrictive licensing with restrictive formats, you get DRM
- trying to make digital formats un-copyable is like trying to make water not
wet
- make your data free
Host your own
- Use open formats, standards, and HTML gives you a big chance of longevity
Use non-restrictive licenses, particularly Creative Commons
Preserve the little stuff
- Graffiti on the walls in Berlin
- Porn in old incarnations of time capsules
- Illuminated manuscripts have notes from the monks in the margins, less than
140 chars
- “Wallow in the habitual and the banal”
- Very little on the web will be permanent
- No civilization can ever save everything, we should try, our will is
insufficient, but the technology exists
- “Why the net matters, how the internet will save civilization” (book)
- Don’t loose things, tell each other faster
- Get more brains involved in solving problems
- We can evolve
- We need to make more copies in other places
- “The dinosaurs died out because they didn’t have a space program”
Idea to Interface
Aarron Walter
- Emotional Design
- We Make Stuff
- If you get hyper focussed on execution, you lose your creative thinking
- if you don’t use it you lose it
- Bad for you
- if you’re always executing, and not thinking creatively about how you do it
- Bad for your boss
- you might leave, and you become a worse employee, not providing value
- Independent Thinking - keep a fire in our belly
- Independent Projects
- can turn into business collaboration
- warm fuzzy feeling that makes you feel good about getting up
- Dribbble
- Huffduffer
- What would happen if… ?
- A sign our creative juices are flowing
- We say that, and often let it die
- Jack Dorsey sent “I’m at golden gate park” made my.stat.us, now twitter
- Jack Dorsey, Twitter:
- Just start, get it out of your head on paper, prototype
- either it sparks, or you put it on the shelf for later
- You can make 1000 excuses and never do anything
- 1000 Things on a shelf
- Inspiration is created by you, not external
- Maybe today is the right time
- Failure is OK
- there isn’t really such a thing as failure
- On YOUR time
- Sometimes I stay up ‘til 2 in the morning, and that’s ok
- If it allows you to have control of what you’re doing
- You have the idea, you present it, you send the idea from the bottom up
- That’s worth staying up for
- Permission
- We don’t think we have that
- It comes from you. Permission is always within your grasp.
- You give yourself permission
- “I’m not the best, but I’m as good as the next guy.” -Tim
- did recent Death Cab for Cutie music video
- How do I flip that creative switch?
- “Take a bath.” Archimedes story
- creative process….
- ideate - create lots of ideas
- incubate - sit on it, usually figure it out in this stage
- evaluate - choose to do!
- The judge will kill your creative process
- ANY idea is a good idea
- Don’t judge what is coming out
- Protect your work, know when the idea is young, flesh it out before sharing
- Don’t take it too far and become a mother hen
- Don’t let things become too precious
- Design
- we think about as grids, type, color, texture
- it’s not just about visual communication, it’s about my audience
- it’s about assembling a broader picture of our content
- It’s about our wireframes and interface drawings
- Big D design, creative thinking and solving a problem
What Problem are you solving?
- if you have interest, go with your gut
- it can answer itself, too, in time
Concrete Techniques
- Sketchboards
- Printer papers on a big paper, all together, post-its, interfaces, etc
- Landscape format, like a story, see everything at once
- a website is like looking through a straw
- Get your ideas out of your head
- Physically accommodates multiple people
- Ideate quickly
- Incubate on your walls
- “Put it up there and live with it”
- Evaluate with your colleagues
- Keep ‘em public
- good for maintaining a sense of humility
- Prototyping
- transform it quickly
- It needs to be about practical means to an end
- put development notes at the bottom
- FORK
- scary in general dev, good in prototyping
- watch out for making it “like 2 versions ago”
- UI common folder for basic stuffs
- build something fast
- make your own prototyping libraries
- Use it while you design
- “Code ain’t my thang”
- Design Patterns
- New Fancy Ideas are great, but know they have overhead
- You’ll have to build new things, and users will have to learn new things
- New isn’t always the best, sometimes you just need familiar
- http://patterntap.com/
- http://developer.yahoo.com/ypatterns/ Design + Code
- Designing Interfaces by Jennifer Titwell
- Use patterns instead of trying to recreate the wheel every time
- Patterns lower the learning curve, so people can use your app quickly
- LESS CODE
- We created our own pattern library
- up on flickr
- http://githubs.com/stubbornella/oocss object oriented CSS
- killed 46% of mail chimp’s CSS
- cut facebook’s code 14% and markup 44%
- jquery tools http://flowplayer.org/tools/
- This SHOULD NOT be the code that goes live
- Sometimes you intentionally want an anti-pattern
- About to delete an account in Mint “type in DELETE”
- anti-pattern to keep you from succumbing to muscle memory and clicking
on “OK”
Personality
- Audience meet product
- Matchmakers
- How people see us
- Brand is a manifestation of collective personalities
- think about that from the beginning
- Design Persona
- Personality Map for mailchimp
- give it to someone else who would “get it”
- Brand traits
- Voice
- Style
- Visual Lexicon, these types of colors and fonts mesh with our personality
- Sample engagements
“Did I wear a purple shirt today to go with a purple book? Would you still
love me tomorrow if I said yes?”
Next Pint, made by one of my employees
- How do you have the time?
- “I get it done because I get it done”
- It’s a priority in my life
- Scratch an Itch
- what you know
- something that I like and I want
- someone else out there will like it just as much as you
- “Undercover User Experience Design” (book)
- A visible idea
- on paper
- make it
- get clarity about your idea
- Byproduct => CONFIDENCE
- “That confidence gives you permission”
- Bosses - make sure your employees have the space to be creative
- Employees - find the time
- Independents - it keeps you inspired
- “You’ve got permission, it comes from within”
Smoke Gets In Your Eyes
Andy Clarke
- Don’t design interface elements that look like onboard OS elements
- Good pages are always under construction
- The best animation is the stuff that’s defined by its limitations
- Anthony Calzadilla - best CSS3 animations out there
- http://animatable.com/demos/madmanimation
- CSS3 transforms
-“issued by the department of redundancy”
-FX
- translate
- rotate
- scale
- skew
- new instance of normal flow
- transform: translateX(100px);
- transform: translateX(100px);
- transform: translateX(-100px, 100px);
- transform: rotate(90deg);
- transform: scaleX(1.5);
- transform: scaleY(1.5);
- transform: scale(1.5); //both scale up
- transform: scale(0.5); //both smaller
- transform-origin: 0 0; //top left
- transform-origin: 100% 100%; //bottom right
- transform:
translateX(100px),
rotate(30deg);
- applied in order
- Transitions - make things feel real
- background
- border
- color
- dimension
- font
- opacity
- transition-property: all;
- transition-property: color, border;
- transition-duration: 1s;
- transition-delay: 1s;
- transition-timing-function: linear; // or linear, ease
- SHORTHAND
- transition: opacity .25s .1s linear; // property, duration, delay, timing
- @keyframes curtain {
from { opacity: 1; }
to { opacity: 0; }
}
- @keyframes don {
0% { opacity: 1; }
100% { opacity: 0; }
}
- .don {
animation-name: fall;
animation-delay: 1s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-direction: normal;
}
- footnotes applied an ID, as they are clicked, they highlight and flash a color
- 3D hardware acceleration for iOS devices, turn it on:
- translate3d(-5%,0,0)
- scale3d(1.5,1.5,1.5)
- renders smoother and faster
- Latest version of firefox, aurora includes animation support
- MOZ does not support 3d transforms
- an animation is a sequence of events, it’s a list
- use an ol, use p for browsers that don’t support animation
- use modernizer to put all the elements into the DOM, generate watch link too
- use JS for timing
- thinking intelligently about the fallbacks, aggressive degradations
- http://animatable.com/
- browser based CSS animation tool
Outing the Mind: Designing Layouts That Think for You
Mark Boulton
Things always turn into a mess in the end.
- No matter what we do.
- The natural way of things:
order -> mess
<———designer
- unload and load a ship in 1 week => became 24 hours with shipping cargo
boxes tat stack together
- low entropy: order, high entropy: no order
- “Gas which is wooo! I’m gas!”
- Entropy is proof of time, time’s arrow.
- The process from order to mess is what defines time.
The Human Brain was never contained in the head. - Philosopher @ Emerson
- we cannot get by everyday with the amount of info we have to deal with
- but we do need some things
- Computations have been taken out of the head, and embedded into a thing
- Externalize your intelligence and put it into a thing
- Math => slide rule (or calculator)
- “Our brains make the world smart, so we can be dumb in peace.” -Andy Clarke
Spaces to think with
- How do great leaps come about?
- Picasso struggled to express himself, became acutely aware of the rules of
African art, put them in modern art and created Cubism
- Applied one field to another
- Never been able to psychologically prove genius, hard to define, subjective
- Genius happens when one person makes the link form one thing to another
-theory
- grid system, Book of Kells has rudimentary ordering
- baseline grid from 1000 years ago on vellum
- Man seeing chaos and man trying to impose order on chaos
- Make this mechanical
- Embed a thing with intelligence so we don’t have to think about it
- Printing press broke down the power of the church quite a bit with mass
distribution
- “New Typography” by Jan Tschichold, Manifesto (book)
- Swiss movement is rigid adherence to a grid
- the mechanical things were not sophisticated
- minimal, inks limited
Shaping the page
- “No matter how much rationalization we put in front of our processes, we
always want to make things beautiful, and I don’t think we should be
ashamed of that.”
- Design rules are “impossible to improve” from this 1920s manifesto
- Bind the content to the object with Golden ratios
- Penguin logo on the crime series is bound to the layout
- tangible geometry has the capability to bind the reader to the book
The ‘Page’ = ‘Canvas-in’
- order ——-> mess
- ^ designers are here
There is no spoon
- On the web we don’t have pages in the same sense, no edges
- We’ve taken that graphic design layout practice to create a feeling of
belonging
- “A Dao of Web Design” by John Allsopp (article)
- Cameron Moll - 2006, gridding the 960
- blueprint
- 960.gs
- 960 is a bit of a crutch
- Nobody teaches this, we assume it’s just kind of “understood”
- You feel your way around grids
- This has to STOP, there is no page here
Pain
- We say change is coming, smartphone sales rising
- Change is here, right now!
- Old-way = canvas-in
- It’s a privilege to be a designer now because the web is reinventing what
we’ve done with design for the past 1000 years
- Need to be thinking = content-out
- Fluid, Chaotic, Responsive
Designing layouts that think for you
- order ———> mess
^ designer (“design for there”)
- shed this notion of control
- You can’t have control on the web.
- Be aware of the state you can get in to
- Many measurement systems are based on the human form
- Inches are based on the thumb, not so with the metric system
Connectedness
- new CSS3 terminology does not align with the historical terminology
- You can have uniform or asymmetrical columns in grids
- columns have no place on small screens, what’s the point?
- Baseline grids are a pain in the ass on the web
- baseline grids are not worth it on the web
- every fourth or fifth line should line up, incremental leading
Design Principles
- less modules = better connectedness
- 16px unit grid on BBC
- don’t design 16 col grid, design 5 col grid
- design from the content us the edges of the page
- Use odd numbers over even
- Even numbers look weird
- Plan for mess
- Design bits that go into grid systems
Techniques
- Start from content
- if the grid doesn’t work out, don’t be a slave to the thing you haven’t
created
- creating your own grid gives you freedom
- Use images and type to start
- big => small
- Insetting - push everything one column to the right
- create active whitespace to draw people’s eyes
- no silver bullet for gutters
- people get really hooked up on the maths
- make it feel right
- make gutters relate to the padding around things
- Hanging lines - vertical divisions, visual pause for the reader
- use rules (div line) at the bottom of hanging lines
- Navigation
- nudge items up in lists, items belong to a line
- knock lines back, visual anchors (make lighter)
- Tables
- don’t need vertical lines
- nudge them up
- use sans-serif, it has no descenders and ascenders
- make lines lighter, if they’re too much
- make things bold to emphasize
- “instead of adding, adding, adding, reduce some stuff”
for emphasis of other elements
Design for the mess
- Think content out instead of canvas in
- Define a constant
- Less modules
- Use odd numbers over even, it will feel better
- Create connectedness
- users will have a sense of pleasure
- the only time your users should notice it is when it’s bad
Disaster, DNA, and the Fathomless Depth of the Web
Jeff Veen