Gaming
Entertainment
Music
Sports
Business
Technology
News
Design
Fitness
Science
Histoy
Travel
Animals
DIY
Fun
Style
Photography
Lifestyle
Food
2018-04-24T10:57:32.017Z
0
{"feed":"LukeW","feedTitle":"LukeW","feedLink":"/feed/LukeW","catTitle":"Design","catLink":"/cat/design"}

In his The Way of the Web presentation at An Event Apart in Seattle, Jeremy Keith discussed building for the Web today and how to manage the rate of change of technologies and tools for Web development. Here's my notes from his talk:

  • Science fiction is not about predicting the future, it is about looking at the concerns we have today and projecting them forward. Novels are empathy machines. You can really get into what the characters were feeling/experiencing and thereby share their concerns.
  • While science fiction books get some things right about the future, they also have blind spots. For instance, people went to phone booths instead of carrying mobile phones. In the present we have a future that was almost beyond what was predicted in seminal works of science fiction.
  • With where technology is today and what is possible, are we in a utopia or a dystopia? Are we excited or afraid of technology's possibilities. What makes the difference? Why are we excited about some technologies and apprehensive about others?
  • Working on the Web can be overwhelming as we have to endure constant changes in technology and processes. When that rate of change is especially steep, things get worse.
  • Stewart Brand's pace layers outline the rate of change of everything from people to buildings. Fashion changes quickly, culture changes slowly, and that's good. We get apprehensive when things that should move slow start changing too quickly. Example: quick changes in government are usually revolutions.
  • The materials of the Web (HTML,...

In his Performance as User Experience presentation at An Event Apart in Seattle, Aaron Gustafson shared a number of ways to optimize Web page performance. Here's my notes from his talk:

  • Our jobs as designers is to reduce friction for our users. Poor performance causes friction and can negatively impact key metrics like conversion and revenue.
  • How do Web pages load: when you enter an address in a URL bar, a DNS look-up replies with an IP address, then there's a TCP handshake followed by the actual request for files/data, once there's a response the browser can actually do something.
  • Once the browser gets a response, it can assemble the document object, the render tree, layout, paint, and finally load. CSS and Javascript can delay this process and sometimes cause it to run again.
Steps for better performance
  • Use native features whenever possible. They are effectively free. Semantic elements not only reduce bytes but also contain attributes that provide a lot of functionality like placeholder, autocomplete, autocorrect, type, etc. System fonts can help reduce the need for custom font downloads. Font stacks can cover fallback issues.
  • Only include assets you actually need. Every tool has a cost, make sure you are really using enough of each tool to justify that cost. Chances are the tool you are trying to use is already on a CDN and you can use resource hints to speed up the download process. But downloading isn't everything as Javascript frameworks also take time to execute, which is slower...

In her Navigating Team Friction presentation at An Event Apart in Seattle, Lara Hogan discussed what causes teams at work to have issues and how to address them. Here's my notes from her talk:

  • Teams of people are amazing. Its a privilege to work together with people to make things.
  • Bruce Tuckman found a series of stages that groups of people go through: forming (comes together in a new state), storming (some friction emerges), norming (clarity begins to emerge), performing (effective state). This is a cycle that repeats itself regularly.
  • Storming is a natural part of team dynamics but it does create friction. You need to be able to move past the friction in order to focus on what actually matters.
  • It can take a while for managers to identify and resolve points of friction. So what can team members do to address the issue earlier on?
Core Needs
  • Everyone transforms into different versions of themselves sometimes. The rationale part of our brains isn't always in control. Instead, we may be reacting to fear and/or threats that put us into fight or flight mode. These reactions come from more than use physical safety and shelter needs.
  • Modern humans have several core needs. First, people need to belong to a group or community. Second, people need to make improvements and/or progress (for team, company, or personally). Third, people need to be able to make choices about their work -they need flexibility, and decision-making capabilities. Fourth, people need access to equal resources, information, and fairness....

In his Beyond Engagement: the Content Performance Quotient presentation at An Event Apart in Seattle, Jeffrey Zeldman introduced a new metric for tracking how well Web sites are performing. Here's my notes from his talk:

  • The number one stakeholder request for Web sites is engagement: we need people using our services more. But is it the right metric for all these situations?
  • For some apps, engagement is clearly the right thing to measure. For others, more time spent might be a sign of frustration.
  • Most of the Web sites we work on are like customer service desks where we want to give people what they need and get them on their way.
  • Content Performance Quotient (Design CPQ) is a metric of how quickly we can get the right content to solve the customer's problem. The shortest distance between problem & solution. This tracks your value to the customer by measuring the speed of usefulness.
  • Pretty garbage: when a Web site looks good but doesn't help anyone. Garbage in a delightfully responsive grid is still garbage.
  • Slash your architecture and shrink your content. Ask: "why do we need this?" Compare all your content to the goals you've established. Design should be intentional. Have purpose-driven design and purpose-driven content.
  • We can't always have meetings where everybody wins. We need to argue for the customer and that means not everyone in our meetings will get what they want. Purpose needs to drive our collaborations not individual agendas, which usually leak into our Web site designs.
  • It’s...

In her Scenario-Driven Design Systems presentation at An Event Apart in Seattle, Yesenia Perez-Cruz shared lessons learned building design systems for multiple brands/Web sites and how specific user-scenarios are key to making flexible solutions. Here's my notes from her talk:

  • Design systems have helped many organizations build better, more cohesive experiences faster. but what's really behind a design system? is it a set of components? a common language? or something more?
  • A good design system feels cohesive, unified, and connected. It achieves something.
  • Bad design systems fail when there's too much focus on elements and not enough focus on how common components work together to create an experience.
  • We need to start our design systems with user-scenarios, not with individual components.
Starting with Elements
  • Vox wanted a design systema nd common platform for their 8 brands and 350+ Web sites. They made a lot of assumptions in the beginning that didn't work. Primarily: a set of flexible, brand-agnostic modules with a theming system would give them the most range. Essentially, legos.
  • This approach was too focused on layout and the end result was that each of the sites felt too similar. Critical content and focus differences were missing. The end result did not not allow Vox to tell better stories faster, as it only defined common modules not ways to solve common user problems.
  • Vox learned they needed to start with something specific in order to develop a flexible system. You can’t start with individual components because successful design patterns don’t exist...

Following a few conversations on the future of TV and desktops/laptops, I decided to look into how people's screen time has changed. To do so I compiled data from a few different sources going back several years on adults (18+) in the United States.

While the rise of time spent on mobile is dramatic, the effect is mostly additive. That is, it created more screen time in the United States than it took from other media like TV and radio.

Looking at another data source, in this case Nielsen's Total Audience Report over the past four years, seems to tell the same story.

That said, it does appear activities like listening to radio and video viewing are gradually transitioning to mobile devices over time (with the vast majority on smartphones).

Which makes sense when you consider adults in the US are spending about 3 hours a day on their mobile devices.

Two years ago, I pulled together a look at the most common mobile device form factors and how people were using them. At the time 67% of mobile devices were 4-5.5 inches. Since then things have changed dramatically.

Over the course of just three years, active smartphones with 5.5" to 6" screens grew from 7.5% to 43% according to Scientia Mobile's panel of mobile Web browsing activity.

And in 2017, 5-7" smartphones became the majority of smartphones in use in Flurry's native mobile app sampling. That's some "big" changes as larger screen sizes not only impact design but time spent as well:

  1. Designing for Large Screen Smartphones
  2. As Mobile Screen Size Increases... So Does Activity

Recently, I dusted off my full day workshop on visual communication for a room full of product managers. While discussing the role of visual hierarchy in screen layouts, I was struck by how many people were impressed at the consistency Apple.com (one of my examples) showed over the years.

Over the past 17 years, Apple.com's visual style had changed through the application of new fonts, colors, and textures but its underlying layout (or its visual organization) had not.

Looking even further back, Apple.com has retained the same layout structure (primary promotion, 4 secondary promotions, global navigation, and footer navigation) for over twenty years. I guess if your visual hierarchy ain't broke... don't fix it.

In his The Case for Progressive Web Apps presentation at An Event Apart in Denver, Jason Grigsby walked through the benefits of building Progressive Web Apps for your Web experiences and how to go about it. Here's my notes from his talk:

  • Progressive Web Apps (PWAs) are getting a lot of attention but we're still really early in their development. So what matters today and why?
  • A PWA is a set of technologies designed to make faster, more capable Web sites. They load fast, are available online, are secure, can be accessed from your home screen, have push notifications, and more.
  • Companies using PWAs include Flipkart, Twitter (75% increase in tweets, 65% decrease in bounce rates), and many more.
  • Are PWAs any different than well-built Web sites? Not really, but the term helps get people excited and build toward best practices on the Web.
  • Web browsers are providing incentives for building PWAs by prompting users to add PWAs to their home screen. These "add to home screen" banners convert 5-6x better than native app install banners.
  • In Android, PWAs show up in the doc, settings and other places. Microsoft is putting PWAs within their app store. Search results may also start highlighting PWAs.
Why Progressive Web Apps?
  • Not every customer will have your native app installed. A better Web experience will help you reach people who don't.
  • Getting people to install and keep using native apps is difficult. App stores can also change their policies and interfaces which could negatively impact your native app.
  • You...

In his Prototyping: The Scientific Method of Business presentation at An Event Apart in Denver, Daniel Burka described how to use different forms of prototyping to create value for businesses based on his work with Google Ventures. Here's my notes from his talk:

  • When you ask CEOs, heads of product, etc. "what keeps you up at night?" you hear very different answers than what companies perceive as design issues. This is a big concern: how can designers work on key issues within a company instead of on the side on non-critical design tasks.
  • Design done right can be the scientific method for business. People within a company have lots of ideas and often talk past each other. Designers can take these ideas, give them shape as prototypes, and allow the company to learn from them.
  • The best thing you can learn as a designer is how to be wrong faster. Instead of building just one idea (that a group aligns on), test a number of ideas quickly especially the crazier ones.
  • Use design to recreate the benefits of a lab so you can be effective faster. Lightweight techniques can be built up to create a more robust process.
Basement Lab
  • You don't need anyone other than yourself to make something appear real really quickly. Take the inkling of an idea and turn it into a rough prototype as quickly as possible. If a picture is worth a thousand words, a prototype is worth a thousand meetings.
  • As a designer, you can make someone’s...

Last week at Google's Conversions event in Dublin, I walked through the past ten years of mobile design and what the future could/should look like including an extensive Q&A session. Videos from both these sessions (totaling 3 hours) can now be viewed online.

In the first session (90min), I take a look at what we've learned over the past ten years of designing for the largest, most connected form of mass media on our planet. Have all the mock-ups, meetings, emails, and more we've created in the last decade moved us beyond desktop computing interfaces and ideas? If not, can we find inspiration to go further from looking at what's happening in natural user interfaces and hardware design?

The second ninety minutes are dedicated to Q&A on common mobile design and development issues, what's next in tech, and more.

Big thanks to the Conversions@Google team for making these sessions available to all.

In his Living a Testing Culture presentation at Google Conversions 2017 in Dublin Ireland, Max van der Heijden talked about the A/B testing culture at Booking.com and lessons he learned working within it. Here's my notes from his talk:

  • Booking.com books 1.5 million room nights per day. That's a lot of opportunity to learn and optimize. More than 40% of all Booking.com sales happen on mobile
  • Booking.com A/B tests everything. If something cannot be A/B tested, Booking.com won't do it. There's more than 1,000 A/B tests running at any time.
  • Teams are made for testing a hypothesis. They're assembled based on what resources they need to vet a hypothesis. They are autonomous, small, multi-disciplinary (designers, developers, product owners, copyrighters, etc.) and have 100% access to as much data as possible.
  • Booking.com's experiment tool allows everyone to see all current experiments to avoid overlaps and conflicts between testing.
  • Predicting customer behavior is hard. Teams at Booking.com adapt often. As a result, teams often dissolve, spin up, and shift around.
  • Failure is OK. Most of your learnings come from tests that don't work. 9/10 tests at Booking.com fail.
  • Everyone needs to to live the testing culture. Ideas can come from anywhere and go all of them go through the same testing process. Everyone is part of this.
  • Data only tells you what is happening. User research tells you why. These two efforts work together to define what experiments to run next and then test them.
  • What worked before might not work now. Always challenge your assumptions.
  • Make sure...

In his The Psychology behind Evidence-Based Growth presentation at Google Conversions 2017 in Dublin Ireland, Bart Schutz shared how to think about applying psychology principles to influence customer behaviors. Here's my notes from his talk:

  • What truly drives and influences homo sapiens?
  • People are never one thing, we have two systems in each of us. System two is your consciousness, the self. System one is automatic and controls your intuition and your unconscious actions. System two has memory, can think logically, and make predictions of future outcomes. System one can't.
  • Our system two brain tries to automate as much as possible, so it can focus more energy on new situations. As a result, we often give automated answers, without thinking about them.
  • Accept that you don't know why people do what they do. Your brain only understands things consciously so a lot of time is spent talking. Instead, use that time to run experiments.
  • Make it fast and cheap to run experiments. This is step one. To convince others, rethink experimentation as regret instead of gain. Consider what what you would have lost if you would not have run the experiments. Loses are powerful motivators.
  • Once you are running a lot of experiments, adding more is no longer as valuable. You need to increase the value of each experiment you run. This is where you can apply more psychological insights.
  • Different experiments work to influence human behavior depending on which systems are in "control".
  • When people are only system two driven:...

In his Checkout for Winners presentation at Google Conversions 2017 in Dublin Ireland, Andrey Lipattsev talked through two new APIs for improving sign-in/sign-up and checkout on the Web. Here's my notes from his talk:

  • The Web is better than ever before. You can build fast, rich, app-like experiences but many companies opt to route people to native experiences instead of optimizing the Web experiences. That needs ot change.
  • On mobile, 54% of people quit checkout if they are asked to sign-up. 92% will give up if they don't remember a password or user name.
  • Google has been working on two Web APIs for seamless sign-up/sign-in and payments on the Web.
  • One tap sign-up is a streamlined conversion experience that works across all browsers to instantly sign people in for personalization and passwordless account security.
  • One tap sign-in helps websites with short session duration and provides cross device access as well.
  • Example: 10x more sign-ups/accounts created on Wego (a travel site) since implementing One tap sign-up
  • AliExpress had a 41% higher sign-in rate, 85% fewer sign-in failures, and 11% better conversion rate when they added One tap.
  • The Guardian gained 44% more cross-platform signed-in users with One tap.
  • We still buy things online by filling in Web forms. This introduces a lot of friction at a critical point.
  • The PaymentRequest API is a standard that enables you to collect payment information with minimal effort. This is not a payment processor. It is simply an API to collect payment information with two taps.
  • The PaymentRequest API...

In his Driving mobile success by optimizing landing pages presentation at Google Conversions 2017 in Dublin Ireland, Martin Wagner talked about the journey he went through optimizing the bucher.de site for performance over the past two years. Here's my notes from his talk:

  • Most people believe good pagespeed score results in a good loading time and if you improve the score once, that's enough. The reality is quite different.
  • When the bucher.de site moved to a responsive Web site, pagespeed scores initially went up (that's good) but load times went down. After fixing a few issues, however, the average page load was improved over the old desktop site.
  • On the separate mobile site, however, performance problems with third party libraries and images were an issue. Mobile was the last platform that was moved to the responsive Web site.
  • After launch, the responsive mobile Web experience page download doubled because more functionality was added so page load savings had to be found elsewhere. One quick win was Javascript and CSS refactoring that to reduced 130kb in one day.
  • Performance budgets were very helpful to define a load time on a specific network in order to set the right size targets for the site's components.
  • DOM elements (fly-outs and product sliders) that weren't needed on mobile were removed until until they were needed. This resulted in 800 and 900 less DOM elements. This improved loading performance by a full second on mobile. Image lazy loading techniques like this are quite useful but...

In her Faster mSites = More Revenue presentation at Google Conversions 2017 in Dublin Ireland, Eimear McCurry talked through the importance of mobile performance and a number of techniques to improve mobile loading times. Here's my notes from her talk:

  • The average time it takes for a US mobile retail Web site to load is 7 seconds but 46% of people say what they dislike the most about the Web on mobile is waiting for pages to load.
  • More than half of most site's new users are coming from mobile devices so to deliver a great first impression, we need to improve mobile performance.
  • Desktop conversion is about 2.5%. At 2.4 second loading times, conversion rates on mobile peek at about 2%, as load times increase it drops. Slowing down load time to 3.3 seconds results in the conversion rate dropping to 1.5%. At 4.2 seconds the conversion rate drops below 1%. By 6 seconds, the rate plateaus.
  • As load times go up, more users will abandon your site. Going from 1s to 3s increases the probability of bouncing by 32%. Going from 1s to 5s increases the probability by 90%.
  • Page rank (in search) and Ad rank (for ads) both use loading time as factor in ranking.
  • Your target for latency is one second but 1-2 seconds to load a mobile site is a good time. 3-6 seconds is average but try to improve it.
Improving Mobile Performance
  • AMP (Accelerated mobile pages) is a framework for developing mobile Web pages that optimizes...

At the Igniter Annual Conference in Mountain View, Rand Fishkin shared eight common mistakes startups make with their marketing/growth hacking and how to avoid them. Here's my notes from his talk: Why Startups Suck at Marketing

Most startups fail because they couldn’t find the right customers at an affordable price. But what specific mistakes do they make with marketing that could be avoided?

Terrible Name
  • Problems with names: no one can say your name (hard to pronounce), you don’t own domains or social handles, your name is used by other companies (esp. in your domain), etc.
  • Make your names easy to spell, say & remember, has no existing associations that could confuse, avoids trademark infringement, what the company does has no problematic overlaps, the .com and social media accounts are owned by you, has few or no Google search results, biases toward brand able.
Overvaluing First Exposure
  • Typical startup myths: make a great product, get some press, get customers.
  • But where people do to learn is from online lists, talking to others, using existing solutions, etc. If you only play at first exposure and/or decision time, it won’t work well.
  • Step 1: get known and trusted by your audience. Step 2: grow a presence across thew channels they use to find solutions for what your product does. Step 3: be visible throughout their discovery, consideration, and decision processes.
Chasing Growth Hacks
  • Don’t fight the “law of shitty clickthrough rates”. Chasing growth hacks usually leads to death before success. A lot of exploitable short-term growth hacks start...

At An Event Apart in Seattle WA, Sarah Parmenter shared her thoughts on the current state of visual design on the Web and its impact on brands. Here's my notes from her talk: Practical Branding

  • Designers used to have their own style, which was often on display via personal redesigns. Agencies also had their own strong styles. But after many years of Web design & technology changes, we've forgotten about design and brand. We're just filling in boxes instead.
  • Every company now is a media company. We need to care more about our brands.
  • Websites have become homogenous because we have become complacent. We're in an era of boring and predictable designs. We don't all need to look the same.
  • Instead we need to ask if these patterns are right for the task we're working on. Know what your brand is and don't copy what others are doing.
  • Branding is the product of deliberate conception. Many decisions come together to become a brand. It is not a pattern library or a mood board. Considerations like tone, message, and how your product is viewed are a much bigger part of your brand story.
  • Research can help you understand what's happening in the market but a big problem with research is that is can be swayed by strong personalities/ideas. Be mindful of biases that exist/emerge through the process.
  • We need very definitive answers about our brands. Designers need to be able to answer these clearly.
  • Key elements that you can focus on to deliver a consistent brand...

At An Event Apart in Seattle WA, Krystal Higgins discussed how to make on-boarding part of a broader, long-term approach to customer guidance and engagement. Here's my notes from her talk: On-boarding for Any Situation

  • Companies are focused on on-boarding to help new customers get engaged and set-up but what is the end-state we're aiming toward? We need to know where we want customers to ultimately be.
  • Products are constantly changing and evolving so when does on-boarding actually end? When we design on-boarding, we only focus on the first run. We need to continue to adapt as our products and customers change. The most critical users sessions may actually be 3 to 7 days out (according to Android mobile data).
  • On-boarding needs to familiarize new users, learn about them, guide them to next steps, and convert them through a series of conversion actions. That's a lot.
  • Examples of sequential, longer-term on-boarding processes: Lumosity, Wealthfront, DuoLingo. Each waits for the right time to guide people through interactions. This helps build a personal focus (looking at it from end user's perspective).
  • Similar techniques can be applied to introducing existing users to new features and changes. Even in the case of major redesigns, we want to prepare users for the change, familiarize them with changes, guide them through it, and help them provide feedback to help us make improvements.
  • People returning from a lapse or infrequent use also need to be re-familiarized to a product and its changes.
  • On-boarding isn't a fixed path, people can take different...

At An Event Apart in Seattle WA, Ethan Marcotte discussed how responsive design is evolving into pattern-based device-agnostic systems of resilient design. Here's my notes from his talk: Design Beyond Our Devices

  • Human history is founded on exploration. We're always craving movement and direction. In the last few years, discussions about Web design have been focused on "where are we going?"
  • Moving from pages to patterns: this is a huge shift from creating grids that get filled with stuff. Our previous "canvas in" approach is no longer sustainable given the quantity and variety of devices we have to design and develop for.
  • Pages are tightly bound entities of the past. Instead of pages, design networks of content that are composed of patterns. These patterns, which are small responsive patterns themselves, can be stitched together to create composite experiences like pages.
  • "What if someone doesn't browse the Web like I do?" Ask this question when designing to move beyond fixed layout styles.
  • Now more than ever, designers need to start with the priority of information rather than the layout. This allows us to accomodate various formats/forms of display/presentation.
  • A content priority can be mirrored in markup. This allows both content and markup to be presented uniquely and appropriately on different devices. The priority & markup doesn't change but the presentation does.
  • Feature queries can be used to ask browsers if they support specific style rules but "support" doesn't actually mean everyone gets the exact same experience. A baseline experience provides access to all, start there.
  • A...