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

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...

In her Psychology Behind Mobile Behaviors presentation at Google Conversions 2017 in Dublin, Ireland, Nathalie Nahai walked through several psychological principles to consider when designing mobile experiences. Here's my notes from her talk:

  • We use mobile for everything, even when it's not the best tool for the job. What interactions keep people coming back and why? Those backed by psychological principles like: cognitive load, processing fluency, hedonic adaptaion, and dopamine loops.
  • Cognitive load is the total amount of mental effort used to complete a task. We have a limited capacity for cognitive processing so we need to lower mental effort on mobile to optimize conversions.
  • Experiencing delays on mobile causes levels of stress higher than horror movies (Ercikson research)
  • To reduce mental effort, make it easier for people to make decisions. Examples: ratings, social proof.
  • Reduce the amount of effort required to purchase something. Single step checkouts: lower effort for each step. All information in one step can be overwhelming. Reduce the number of actions required to achieve the goal; split process into single steps; manage visual presentation by visuaally grouping elements.
  • Processing Fluency is the ease with which people process content; content that is easy to process is usually perceived as more trustworthy.
  • Repetition: we tend to rate things that are receptive as more true. Repetitive calls to action and jingles tend to be more memorable. Use messages with structure so people will learn them and respond to similar/familiar calls to action.
  • Visual clarity helps processing. If an interface is easy to understand, people...

In his Faster Mobile Sites, More Revenue presentation at Google Conversions 2017 in Dublin, Ireland, Guillaume Derolez shared a number of ways to optimize the loading time of mobile Web pages. Here's my notes from his talk:

  • Smartphones are performance constrained but users have high expectations of performance.
  • Mobile commerce is an upper funnel affair: customers have a 50% chance to engage with your brand on mobile first.
  • Most conversions touch 2.6 devices.
  • The average load time on mobile commerce sites is 7 seconds for US retail mSites.
  • As page load time goes from: 1s to 3s the probability of bounce increases 32%
  • Mobile pages that load 1s faster see up to 27% increase in conversions.
  • So how fast should mobile pages be? The target for page loading is one second but on a 3G connection, 600ms is needed for overhead which really leaves you with 400ms for round-trip server connection.
  • Top three areas to investigate in order to make mobile Web pages faster: images, non-minified resources, number of requests.
  • Images: 67% of bytes in the average Web pages are images; can be compressed to save bytes. Use lazy loading: only load what is needed for visible on screen elements, later load rest. Avoid “download and hide” or “download and shrink”.
  • Non-minified resources: CSS & JS can be compressed to save 70% of transfer sizes. Enable GZIP. Minify the files.
  • 68% of Websites on Web load more than 50 resources. To limit requests: make use of browser cache, consolidate page resources, load javascript asynchronously, prioritize above the fold...

In his Building a Testing Culture presentation at Google Conversions 2017 in Dublin, Ireland, Stuart Frisby discussed the culture, process, and team structures needed/used at Booking.com to support thousands of optimization tests. Here's my notes from his talk:

  • Booking.com's use of testing results in 2x-3x industry average conversion rates.
  • If it can be tested, test it. If it can’t be tested, don’t do it. No platform goes untested.
  • Teams are made for testing a hypothesis. They're assembled based on what they need to vet a hypothesis.
  • Everyone has access to as much data as possible, which they get at Booking.com. Access to data allows more hypothesizes to emerge, which can then be tested.
  • There is a difference between ideas & hypothesis. Ideas aren't useful. Hypotheses are grounded in the reality of your business and need to be proven or refuted.
  • Test small: too many changes at once makes it difficult to know what had impact. Most tests fail, so need to be able to move quickly and isolate insights.
  • 9/10 of tests don’t have positive impact and you don’t know why. This causes a lot frustration.
  • You have to keep spending money on research; this serves as an input into the A/B testing process. It creates more hypotheses to test.
  • Booking.com has more than a 1,000 tests running at any given time.
  • There’s a temptation to limit tests to 5% vs. 100%. You’ll need to go to 100% at some point, so might as well learn as much as possible as fast as possible, and not limit...

In his Next Generation Web presentation at Google Conversions 2017 in Dublin, Ireland, Ani Mohan outlined the Chrome team's efforts to bring native mobile app-like capabilites to the mobile Web. Here's my notes from his talk:

  • The Web has been around for about 25 years. In 1996, we had 360M people using it on desktop computers. Today it is at 3.6B, mostly on smartphones. This is the largest platform that’s ever been built.
  • People spend most of their time in apps vs. Web sites on mobile. 188.6 minutes vs. 9.3 minutes. But people are getting tired of downloading new apps, rate is approaching 0 new apps downloaded per month.
  • You can think of this difference as a tradeoff between reach and richness. But Chrome and other browsers are working on closing that gap by providing rich experiences in mobile Web browsers.
  • Discovery on the Web starts with a link, so loading speed matters for creating a great first impression. 53% of users will abandon a mobile page if it takes more then 3 seconds to load. 7% reduction in conversions for every 1-second delay in loading times.
  • AMP is an open-source simplified version of landing pages that optimizes for fast initial load times. AMP pages are 4x faster, have <1 sec="" median="" load="" times,="" and="" use="" 10x="" less="" data="" than="" typical="" web="" landing="" pages.<="" li="">
  • There’s more than quick landing pages needed for the Web. To increase engagement: Add to home screen (easy way to launch a site), push notifications (to tell people...

In his Mobile Patterns for Experiments presentation at Google Conversions 2017 in Dublin, Ireland, Craig Sullivan walked through a set of optimization testing best practices for mobile experiences and why they are key to business. Here's my notes from his talk:

  • What has manufacturing taught us? Order doesn't come by itself. The orchestration of people and stuff needs to be managed, this is what has been driving efficiency in manufacturing. This efficiency is critical to survival and used to: improve quality; remove defects & waste; increase capabilities; manage resources; plan resources; etc.
  • What has retail taught us? Thousands of tiny little details must work for you to have a good experience. There are many retail optimization components: window, greeting, lights, heating, displays, etc.
  • What are the atomic parts of cross-device optimization? navigation, search, login, registration, forgot password, etc. These can and should be optimzied to ensure return on investment and survival.
  • We don't learn enough from manufacturing & retail. No one has a meeting where stuff is removed from a Website. We just keep adding stuff. Many small things in digital experiences are broken: touch target sizes, overlays, errors, layout, etc.
  • How can you increase conversion? persuasion, motivation, usability, and broken stuff (start from the end and move backward). An experience is only as good as the crappiest part. A/B testing will only help you polish a turd, if that what you have to being with.
  • Product defects are very costly. Find bugs, fix them. It's a clear and fast return on...

Conversions@Google published a complete video recording of my three hour seminar this month (Oct 2016 in Dublin) on creating obvious designs for mobile and beyond.

In part one I pull back the curtain on an significant design change for a large-scale mobile app and discuss the in-depth thinking/processes that went into it.

In part two I answer audience questions and cover responsive web designs, native applications, form conversions, touch gestures, navigation, cross-platform consistency and more.

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