Between some sessions I ran across a live action Angry Birds room. You had to dress up like one of the birds and then fling plush Angry Birds at a cardboard structure of plush Green Pigs. I knocked them all down but one, and got to keep the plush Angry Bird.
Presenters
Ben Ward, Software Engineer Twitter
Frances Berriman, Sr Front End Developer Nature Publishing Group
Paul Tarjan, Web Hacker Facebook
Tantek Celik, Independent tantek.com
A couple years ago a microformat was started for recipes on the web, it was picked up by several recipe sites. Google recently added recipes search to their site hitting against the microformat.
The first microformat was proposed at the first SXSW on a session on the future of blogging. That kicked off the idea and a community formed around it. There were some simple ones at first. As more were added, a process started to form for creating future microformats.
There have been some issues with microformats internationally and with accessibility.
Creating a new microformat:
Draft (community agrees on the right way to move forward – stable)
Specification (a stable and mature draft)
Standard (market acceptance)
Presenters
Jon Swartz Tech Reporter USA Today
Kimarie Matthews VP Social Web Wells Fargo
Toby Richards GM, Community Microsoft Corporation
What does proactive support mean to you?
Companies need to use new technologies to reach out to customers as never before. Build channels for customers to come to YOU. Proactive support is about breaking down the walls of the store and letting you out to help people where they are.
Frontier airlines went out of their way to help a complaint. The customer went from complaining to praising the company.
Social Schizophrenia
Putting another face on social media that is different than the normal face. Comcast helps the high level people to spin their support. They’re not using social media correctly to the core. They’re putting frosting on a really disgusting cake. What do you do to consistently solve problems, not what do you do to appear like you are on social media.
Do some of these companies that get into social media know what they’re getting into? This can easily blow up in their face, and maybe they shouldn’t be there to begin with. In many cases, they don’t have the scale to keep up with it.
An organization shouldn’t depend on heros. Heros don’t scale – you can’t have people breaking rules all the time. It means that the rules aren’t right.
Twitter:
Only about 3.5% mention their experience on Twitter. It is a pretty small segment of people who talk about their experience on Twitter.
You need to make sure you have the resources to escalate the issues to the appropriate places.
Presenter
Paul Boag, Dir Headscape
Tidbit of information: Brits do not care about the royal wedding!
A Case Study:
Headscape increased ecommerce for a company over 10k% in 5 years – from a reasonable base. Where is the catch?
The company sells frozen meals to elderly people (average age in 80′s). The average cost of a meal is $5-8. Wiltshire Farms
Two Lesson Areas
Business & Design
A successful ecommerce site is based on great business and great design. You have to have a great client and a great designer (you need both). They must work together.
Business (why the client is crucial in the process) @mattycurry
You are unique if you are involved in an ecommerce site. You are NOT Amazon. Even if Amazon is doing it all right, they are doing it right for them and not for you. You can’t just copy other people (even people in your own sector).
Why are you unique in frozen food industry? The age of the audience. What makes your target audience unique? The problem with Wiltshire Farms had was their audience kept dying on them.
New Users: Getting started guide shows up very large on the home page for new users (only the first time they visit the website).
Care Workers: There is a section explaining things to people buying meals for someone else.
A Franchise Model: There was no consistent pricing. You had to put in your postal code to enter the site.
Don’t be seduced by sexy
Don’t test out new stuff on your audience. Sexy isn’t always right for your website. Are you going to generate the return to make it worthwhile?
Visit Users in their Homes:
Usability testing – they realized that their audience never used a mouse before. They found out that everyone used laptops. Go into their homes and find out how they live and get a sense of their character.
Test & Iterate
A small ongoing investment on a regular basis is better than one big investment in many cases. Rocket Surgery Made Easy by Steve Krug, talks about monthly usability testing.
Multi-variance Testing: You discover things that work and don’t work very quickly. (Google Website Optomizer)
A Right Relationship
You have to have a good relationship with your client. Take them out and get them drunk. You need to be able to argue and be comfortable.
Remove Clutter
Again, you are NOT Amazon. The list of meals to choose from and cut it down (added a "see more options"). If you can remove it, do it. If you can’t remove it, hide it. If you can’t hide it, shrink it. Ask yourself what you can remove, what you can hide and what you can shrink.
Product Shots
Product shots are everything. Add great shots to sell your product.
Make Buttons & Links Obvious
Make links look like links and buttons look like buttons. The links are bright blue with big underlines, and the buttons look like they are buttons. Make it obvious and bold. It’s not about design, it’s about increasing sales. On pop-up dialogs describe what the buttons are going to do.
Always Provide Help
Find out what the major questions are and float them to the top of the help. FAQ’s suck, prioritize the questions.
Handle Errors Gracefully
"Oh dear, we have a problem. Let’s fix it together." Be nice with your error messages. Give them real practical advice.
Communicate the Value Added
Show and demonstrate the added value that you provide over your competitors. A large part of the home page is dedicated to value added. Why are you different? Why are you unique. Take some space on the homepage to add that – not just products, products, products.
Presentation Video:
http://boagworld.com/talks/unbelievable-ecommerce/
Presenters
Frank Chimero, Office of Frank Chimero
Jason Santa Maria, Creative Dir Mighty LLC
Stephen Coles, Type Dir Typographica/Fonts In Use
Tiffany Wardle, Typegirl
More Information: http://j.mp/fontcure
There are hundreds of thousands of fonts available and grows every year. It gets difficult to choose types so we many times just rely on the ones we always use.
Typography Basics
Methods for Typography:
How vs. Why, practical execution in addition to theory and rationale.
Arranging the Furniture
Does the furniture fit who it’s for? – don’t put chairy in a modern room
Does the arrangement make sense? – don’t just throw a bunch of pillows in the room
Is there room to get around?
Choose a good typeface:
Good meaning high-quality and proper. Proper for the format, for the content, for the reader. You can set the tone with the word “party” and let the font tell you want type of party it’s going to be. Typopedia
Don’t use too many:
It’s a juggling act. The fewer typefaces one uses the less likely they are to drop the balls. Use faces in the right order – certain typefaces work in body and certain ones work larger.
Have a clear hierarchy:
Make more important things bigger, and less important things smaller. You’re already doing this in markup (H1, H2, H3, etc.).
If in doubt, read it:
Excellent type comes form empathy for the reader. Huffington Post doesn’t pass the read test. It is very hard to read a full article.
How to Evaluate the Quality of a Font
Are there too many choices? Not all fonts are created equal.
Does the font have a minimum character set?
Is it all uppercase? Does it include all punctuation?
Does the font have extended Latin or non-Latin?
Will you need to do anything internationally to support other languages? Find a family that includes all of it.
Does the font have siblings and cousins?
Make sure you’ve got italics and bold in your font. Do you also need condensed or something else?
Is the font well-spaced?
Don’t confuse tracking with kerning. Even well-spaced fonts need some kerning. Look for letters that depend on kerning.
Does the font look good across browsers and platforms?
Look at as many applications of the font as possible. Make sure the fonts are well-hinted.
What makes a good text face?
Pretty much all the web is text. You want people to actually read your content, and connect with it.
When we read:
Take a chunk of text and block out the bottom of it, it’s still legible. If you block the top, it becomes hard to read. Most of the font information is in the top. Find a text face that is easily discernable.
Display Faces:
Look for good x-height.
Look for definition in the letter forms (Verdana). Look at #1 Capitol I and lower-case L (1Il).
Don’t hinder reading in any way if you can help it.
Look for workhorse typefaces that can stand up. Bodini looks good large and shrinks down to nothing when small. Meta looks good large and small. When you have a flexible typeface you can use fewer faces.
Get dirty – take a bunch of text from a project and just see what it feels like to read. See how things look at size.
Helvetica
It looks good in interface design. It looks good really big. Calvetica calendar lists it as a feature. It’s a versatile font, but not in branding.
Too many people use Helvetica for branding. It doesn’t set you apart. Try and do something different to make yourself stand out. 15 of the top 20 retailers use Helvetica in their campaigns.
There are other fonts that are different (newer). You don’t always have to stick to the tried and true.
Times New Roman
Alternate: Le Monde (more modern for newspapers and better for screen.
Gill Sans
Has very inconsistent width and weight (letter A)
Trade Gothic
It has inconsistent widths and weights
Helvetica
Alternate: FF Dagny – has a cleaner design, less formal
Alternate: Museo Sans
Georgia
It’s been the serif for the web forever – it was designed for the screen.
Alternate: BentonModernRE – less contrast, a bit wider
Alternate: FF Meta Serif – more contemporary serif, more condensed
Alternate: Minion – bets neutral typeface, like you’d see in a book
Frutiger
Great font for wayfinding – used in London airport and many many others.
Questions & Tools
Presenters
Branden Hall, CEO Automata Studios Ltd
Emily Lewis, Principal Web Designer Emily Lewis Design
Erik Klimczak, Creative Dir Clarity Consulting
Rick Barraza, Creative Director Cynergy Systems, MS Silverlight
Thomas Lewis, Principal Technical Evangelist Microsoft
Is the web dead? Should people be building apps? Should we be using HTML5? Wired Magazine printed an article, "The Web is Dead,"
Is the web dead or was the story sensationalized?
Rick: It depends on what part of the internet you’re interacting with or what device you’re using and figuring out what is the best technology to do that interaction.
Brandon: You can start with the web as a base layer and determine what to put on top of it. HTML5 provides more interactive experiences (canvas, SVG, etc.). Those will take you a little ways, but not all the way. If fundamentally building an app, maybe web technology isn’t the best place for that.
Erik: Thinking about apps, and what they do, they deliver very specific currated pieces very quickly. You have a toaster in your house to make toast, and a coffee maker to make coffee, but you don’t have a coffee making toaster. Apps have their place and don’t need to be do-all things.
How do you describe HTML5 to customers?
Emily: From the front end, there are more elements to work with the achieve visual and usability pieces. It’s not about calling it HTML5, but it’s about finding out what clients need to achieve their business goals. It’s just a label and doesn’t really matter.
Branden: It’s really just more tags to do more with content.
Rick: CSS to CSS3 was evolutionary. With canvas and SVG, it’s disruptive. It breaks the paradigm of what hypertext markup language is in your head. The best HTML5 experience can now rival the pretty typical plugin experience.
What are scenarios where using HTML5 make sense?
Erik: Jitterbug game in HTML5 that rivals flash is a pretty great thing. Tweetdeck is built in HTML5… better than the version in Adobe Air.
Branden: It didn’t feel right when you had to use flash in the past. It’s great that you can now do this in the web, and it feels right. Canvas has many of the same problems that flash does/did. It’s just a block in the browsers where you put stuff. Things don’t feel native and it leaves a bad taste in your mouth.
What about the things you don’t have in an app (right-click, copy/paste etc.)? What about the web makes it the web?
Emily: The world of the web exists in information browsing, not in apps. The power of HTML5 is twofold. It lets you create more application-like experiences without the use of plugins. By using more symantic markup, we’re creating the foundation for more search and assistive technologies that can ultimately make the information more useful for us.
What specifically in HTML5 helps to solve these problems?
Branden: A lot of the web is built on hacks, like jquery. Stuff like that shouldn’t exist – it’s tools on top of tools on top of tools. You have a new set of tools in HTML5 to do things without it being a hack. Example: divs – it’s not markup – a box in a box in a box doesn’t really help segment the content. HTML5 codifies and makes a lot of old hacks simple without throwing hacks at it.
Rick: The web is like a big flea market. The plugins are the high end of it. HTML5 brings it more to a walmart and brings up the level of quality. Asking if the web is like telling us that we will only shop at one store for the rest of our lives. It depends on what we want to buy. Some things you want an app – in and out very quickly, and sometimes you want an elegant experience.
Branden: The tools are still very rough… it’s new. Some things haven’t been made clear. Javascript is still javascript. We’re still stuck with that.
Erik: Much of the HTML5 information out there is from Webkit/Google, and you start to assume that Webkit is the best out there when it’s not.
Branden: Every browser does it different. There is stuff that is broken in every browser.
Erik: We’re getting to a place where you can’t tell the difference between a website and an app. Sometime Apple and Microsoft etc. will just integrate javascript into the OS.
Emily: W3C is highly political, and they don’t care what we want. It’s just about the biggest guerilla in the room.
Branden: Flash got as far as it did (and quickly) because the standards are always going to move slow. Where we push the web is where standards go next.
Presenter
Lee Shupp, Exec VP Cheskin Added Value
Futurists aren’t about predicting the future with a crystal ball… it’s about watching/predicting change. Technology changes much faster than people (society) does. Technology changes faster than people are ready for. It’s easy to lose them if you get too far ahead. There is a sweet spot of change that it’s too far out there.
Computer interfaces and sizes have evolved over time. Today there are many more touch interfaces compared to punchcards and keyboard/mouse interfaces from the past. We’re getting closer to gesture and vocal interfaces. The evolution of gesture interfaces started with the clapper. The Kinect has taken a large jump (very popular) in gesture interfaces.
Interfaces
What happens when computers can process more and faster than humans?
Presenter
Joe McCann, Principal Architect subPrint Interactive
HTML5 is simply the next revision of HTML.
HTML is the "content" of the app. CSS is the "styling" of the app.
JavaScript is the "business" behind the app.
The value of HTML5 is JUST needs HTML/CSS/JS using the web stack. You can use the web for the majority of applications out there. It doesn’t require multiple designers like it does on multiple platforms. HTML5 is just design for the "web"- native web components… it’s cheaper.
What about maintenance?
If you need to update your logo and your app is written in Java AND Objective-C AND a web app on Ruby. You have to touch/change/deploy each across three different codebases (not to mention distribution mechanisms – app stores).
HTML 5 doesn’t solve all problems, though it does reduce the headache. Maintenance becomes easier, it reduces dev and design costs. A single codebase can be used to do this.
Tools for the Web Stack
Example/Demo
http://freebeernear.me
http://github.com/joemccann/freebeernearme/ (all code)
Presenter
Bruce Lawson, Web Evangelist Opera Software
Opera makes one browser for many devices, so there is some experience in this area.
More people are using mobile to access the web. Many people are abandoning desktops and using only mobile to access the web. Mobile is growing, and is here to stay.
USA top mobile sites:
UK top mobile sites:
Burma top mobile sites:
Most people want the same information, no matter where they are in the world.
Philosophy
There is no mobile web. There is only the web which we view in different ways. There is also no desktop web. or tablet web.
A separate mobile site is not necessary.
Three Methodologies (pick and mix between them)
1. special mobile site
This is almost always not the right way. Sometimes this is the cheapest quickest way (CMS does it?). There are branding difficulties with this – your audience may not even know they are on the same site.
2. do nothing at all
3. optimize for mobile
Tips and Tricks
Apps
HTML5 and JS is turning this into apps.
Widgets – applications filled with web standards goodness (it’s just zipped up).
In the future you’ll be able to just build apps on CSS HTML5 standards and have them work everywhere.s
Presenter
Jane McGonigal, Creative Dir Social Chocolate
“The collective conscience and will of our profession is being tested as never before. Now is the time for us to have the courage for legendary work.”
-Dr. Caldwell B. Esselstyn, Jr.
We spend 3 billion hours a week playing video games… is it worth it? Are we leaving a positive legacy for the future?
We’ve convinced ourselves: Games are a waste of time. Games are addicting – and a distraction from what really matters: real life. Am I filling my life with something by playing games or just distracting from reality. Somehow gamers are not good at life, because in game world you can do such bigger things. It’s a way to escape from real life.
Playing games is the single most productive thing we can do with our time. We need to get half the planet playing games by the next decade.
What do you want to produce more of? We’re so busy trying to be productive, we don’t ask ourselves what we want to actually produce.
Jane wants to produce more:
(spells PERMA, from Dr. Martin Seligman)
*Massively Multiplayer Thumb Wrestling*
(I won my node!)
If you hold someone else’s hand for 6 seconds, you release oxytocin and begin to trust people.
Does 10k hours of playing computer and videogames have side effects?
No correlation between kids and violent video games going out and being violent. Also no correlation between good happy games going out and doing good things.
Music Genre games – a study says that for 67% of gamers who did not know how to play an instrument, they were inspired to pick up an instrument and learn it. 73% went out and played their real instrument more. Games can inspire us to tackle things in real life.
Avatars – if you play with a hot sexy avatar, it will change how you perform in your real life. You’re more confident with a hot avatar, and you would interact (flirt) with more people after 90 seconds playing with sexy avatar in game. Are games changing who we think we really are?
U. S. Army found that playing 3 hours of video games created lower incidents of bad psychological problems (PTSD, etc.). Are games protecting us from real life harm?
Gamers by far had fewer cases of reported nightmares. There were more lucid dreams from gamers. Gamers can control themselves in dreams (like in a video game). Can games give us real-life superpowers?
The science doesn’t work if:
The opposite of play isn’t work – it’s depression.
Games are unnecessary obstacles we volunteer to tackle.
Golf is an absurd way to put a ball into a hole. We make it hard on ourselves.
Eustress
Positive stress – the kind you get from a game. You volunteer for the stress in a game. We get adrenaline quickened breathing. We still get the good changes as exhilaration and excitement but we choose the stress. I’m feeling this way because I want to tackle this challenge.
When we’re in a state of eustress, we set more and more optimistic goals. We hang in there longer, and are more positive to others. “Work is more fun than fun.”
Games activate 10 powerful positive emotions.
Being happy makes us successful – and not the other way around.
Better grades in school
More popularity, social support
Higher achievements in personal goals
More raises and promotions at work
Longer more satisfying marriages
(meta study looked at 475 other studies for this)
We can change our lives by achieving “the 3:1 ratio”.
It’s positive emotions for every 1 negative emotion you feel
Emotions are contagious – both positive and negative. Every time you feel an emotion, scientists have discovered it spreads on aver to 6 other people you know.
Positive emotions make us super-resilient
People with positivity ratio of 3:1 or higher not only are happier and more successful – they live 10 years longer.
With great gaming comes great responsibility.