SmashingConf Barcelona 2016 Day 2 Notes

First day was a blast. Learned a ton of new stuff that I wasn’t privy to before (and able to use in production). I’m surprised to say that the second day has been even better. Again, just a disclaimer that these notes weren’t edited and they were added just as they were jotted down. Enjoy!

John Allsopp - The Mystery Speaker (Dao of Web Design)

@johnallsopp / webdirections.org

• Predictions “Computers in the future may weigh no more than 1.5 tons”
• Humans are bad a predicting exponential growth
• ‘How did you go bankrupt?’ Bill asked. ‘Two ways,’ Mike said. ‘Gradually and then suddenly’ - Hemingway, the Sun Also Rises
• Find the things that change exponentially, they are the things that really impact the world.
• Moore’s law - The complexity for minimum component costs increased at a rate of roughly a factor of two per year. Carnally over the short term this rate can be expected to continue, if not to increase.
• The best way to predict the future is to invent it - Alan Kay
• Prediction - “I think the browser is going to disappear” “Platforms are going to go away; computing will be everywhere because hardware will get cheaper and cheaper and cheaper” “The screen will disappear”
• Native apps are a remnant of the jurassic period of computer history, a local maximum that is holding us back..
• What is the one weird old trick about exponential growth? We need to act on our research & predictions. Carp Diem. Make good predictions, work on meaningful things and help invent that future.

Q&A

Q: We’re so obsessed with Browsers as community, but there isn’t a business there?

A:The browsers are a way we can influence the web. Whichever platform donates will shape the web in their interest, even if those interests are very benign.

My Takeaway

Predicting the future is what John’s good at. He predicted responsive design about 10 years before Ethan discovered/coined it. His take on predicting the future is interesting: don’t just predict, take action on those predictions. I jotted down a few of his future predictions which will be interesting to come back to in 10 years to see what he got right.

Laura Elizabeth - Selling Design Systems

@laurium / lauraelizabeth.co

• The smaller of the company, the less need for a fully fledged design system.
• Design systems are only valuable if they’re kept up to date.
• Company is large enough, brand is established enough, you have the time and mentality, you’re solving a real problem.
• "Our design system with living UI components is the only way we can keep up with the fast growth of AWS offerings" - Amazon
• "Reusable components took 2-3x longer to create but gets justified after rushing 2-3 times. And the value of that increases.”
• "We collected components on a master sketch file. After a week or two we bung to see huge leaps in productivity using the library when iterating on designs” - Karri Saarinen, AirBnb
• We’re not selling a "Design System” what we’re selling is a solution to a problem. And if you don’t have a problem, you’re just selling an artifact (costly and time consuming artifact).
• “You don’t need to get the clients blessing to follow your craft’s best practices” - Brad Frost

Q&A

Q: What are the most common objections from stakeholders?

A: They don’t see the value in it, you’re not selling it well enough.

Q: Shouldn’t they already be a part of our process? As a developer I don’t really need a specific tool to do my job, why do we need to sell them in the first place?

A: In a lot of cases, yeah, having a modular design mind set is really good. But if you want to do something like Salesforce, something that’s really big and requires a budget, you’ll have to be able to justify that spend if you’re going down that route.

Q: Should we encourage more inconsistency?

A: Design systems don’t have a big impact on creativity. You can still have a very creative and imaginative website with a design system.

My takeway

It’s interesting to see how little data there is in regards to how pattern libraries affect the bottom line for companies. While this seems difficult, it’s for sure possible. A/B testing a website with an inconsistant design vs a website with a consistant design should give you a good understanding of what the effect of pattern libraries are (while not directly testing pattern libraries, you’re testing the outcome of a pattern library). I’ll be playing around with some ideas when I get back home.

Jen Simmons - Revolutionize your page: Real Art Direction on the web

@jensimmons / jensimmons.com

• Art direction is a conversation
• You can never create a new font, a new layout, a new color scheme; what you can do is associate different elements
• Layout should not be a multiple choice question - it should be an essay question
• Don’t make a frame work out of CSS Grid. CSS grid is a framework built right into the browser.
• We have 100 years worth of graphic design inspiration.
• labs.jensimmons.com - The Experimental Layout Lab of Jen Simmons
• Initial letter (drop caps) - property pp::first-letter {} (right now is only is safari 9 and 10)
• Feature queries - for browsers that don’t support use support queries: @supports (initial-letter: 4) or (-webkit-iniital-letter: 4 ) {codehere} https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
• margin: auto; in flexport will give you vertical centering
• Dropped and raised caps; Non-rectangular shapes; Images specified in both dimensions; Sizing based on edges;
• flexboxdefense.com & flexboxfroggy.com - games to play to familiarize yourself with flex box
• Think about the HTML only experience. Not only for screenreaders, but what happens when Siri or Cortana wake up in a few years and start reading websites to people?
• layout.land - website Jen's building similar to CSS Garden

Q&A

Q: How did we go back to print design for inspiration?

A: The last thing we want to do is take things from print and add them on the web. We need to take ideas from other places and print is one of them. I frequently look at film and other places, take those ideas and transform them over.

Q: How do we get a company to understand that we have to come up with different designs for different ways?

A: The idea that that there is one solution is a problem.

Q: Thoughts on tools?

A: There is an ongoing conversion about designers learning to code, which tool, which process is the best, etc. Use any tool that’s going to get you to where it’s going to be. At some point you’ll need to hop on the browser.

My Takeaway

A good amount of detail into how making your website look less generic through art direction and what’s currently possible through CSS. It seems like CSS Grid Layouts have evolved since the last time I gave them ago; definitely worth giving them a second try. I had no idea that support queries were a thing. So what’s the point of using modernizr? This talk definitely disrupts my current process and one that I’m anxious to pick apart and implement once I get home.

Slide Deck

Adrian Zumbrunner - Designing Choice

@azumbrunnen_ / azumbrunnen.me

• Good design is about making choices.
• "Not choosing or letting the user decide is an abdication of the designer’s responsibility" - Dan Saffer
• "We cherish the idea of having options, but we’re often better off with less choice" - Barry Schwartz
• Less options equals more focus and easier decision making.
• The value of an option is defined by it’s surroundings.
• Placebo choices - Deliberately adding an option can make people more decisive
• Importance of moments - The right moment can change the way people think about an interface
• Role of Friction - Design is about removing friction from interfaces to people can focus on their tasks rather than their tools.
• "The holistic experience that people feel when they act with total involvement" - Mihaly Csikszentmihalyi
• Friction can improve design and make people more deliberate
• Defaults can make or break the experience

Q&A

Q: When it comes when trying to be unique/standout; is it just the matter of getting things right where most people fail?

A: Utilitarian and the icing on the cake.

Q: Missed the question, but the answer was too good to not add.

A: Simple rule that you can apply, if you were that user, in the same position, how would you like to be treated. It’s your responsibility on how you would like to approach this.

My Takeaway

This talk gave me some insight as to way Apple over simplifies their products to the point where they leave some of us wanting more options; this explains in part why they’re one of our generation’s most popular brands. However, we sometimes have to provide placebo choices in order to influence the user and making a choice.

Christian Holst - Conversion Rate Optimization Techniques in Ecommerce

@KiehnHolst / baymard.com

• 68.81% cart abandonment rate (avg. across 34 different studies)
• 35% increase in conversion rate (average site potential for checkout optimization)
• $260 billion opportunity in the EU and US (35% increase in conversion rate)
• 134 checkout design parameters in order to obtain the 35% increase in conversion rate
• Average site has 39 checkout usability issues in production
• 5.08 checkout steps in 2012 > 5.42 steps in 2016
• Number of steps alone does not constitute a good or a bad checkout / no direct correlation
• 14.88 fields on average, this could just be 7
• Home Depot: 15 form fields / Dell: 45 fields / Crutchfield: 8 form fields
• Focus less on the number of steps and focus more on what you users have to accomplish
• Date of Birth 34%, Phone, Gender - form fields that will cause uses to abandon - Make it optional
• Explain why certain information is required to alleviate privacy concerns.11.6% of tests subjects misinterpreted a review step for an order receipt
• 11.6% of test subjects misinterpreted a review step for an order receipt
• Adaptive Error Messages - adapting the actual error message to the specific rule that caused the error message (4-10 instead of 1-2)
• 18.75% of all account users abandoned cart
• Set fewer password creating options

Q: Scrolling, pagination, load more button?

A: Load more works the most, natural pause in that flow.

Q: “Secured by” msgs?

A: Users perceive different parts of a page to be more sensitive; they perceive different parts due to visual design more secure. Users have small technical understanding of this.

Q: Best practices for email verification fields? What would be a better way to make sure that the email is right?

A: It’s above 50% of all users that copy and paste their email address. Disable copy and paste

My Takeaway

This was pretty good insight in regards to user testing in ecommerce sites (the majority of my testing is for content marketing websites). THere are a few things that I could transfer over; e.g. form fields that convert less, infinit scrolling vs pagination vs load more button, etc.

Maciej Ceglowski - The Website Obesity Crisis

@baconmeteor / idlewords.com

• Chickenshit Minimalism
• Taft test - if images on a website are replaced with Taft and it improves the experience, you don’t need the images.
• www.webbloatscore.com Web bloat score calculator

Q: Keep inventing random things to feel inventive?

A: Maybe not to let the stupidity overwhelm, but that’s how i keep myself from drinking.

Q: The bubble is quivering do you think there’s a chance of a burst?

A: I don’t think of it as a bubble, but as a blister. Even 5 years ago a lot of us thought the bubble was going to end, but it hasn’t. Now we’re in this long endless period of easy money and it hasn’t been healthy.

My takeaway

By this time my fingers were already hurting from taking so many notes. But the gist of it is, we do a lot of dumb stuff on the web just because we can; this is how the internet of things came to be. Things that are created with the purpose of simplifying our life are actually complicating it. Lets be conscious of not overdoing it with unneeded functionality.