Published: Tue, 04 Apr 2017 00:00:00 +0000
Last Build Date: Tue, 04 Apr 2017 00:00:00 +0000Copyright: LukeW Ideation + Design
Tue, 04 Apr 2017 00:00:00 +0000At An Event Apart in Seattle WA, Jeremey Keith discussed the inherent assumptions and principles behind the evolution of technology. Here's my notes from his talk: Evaluating Technology Via DNA code, we get every lifeform on planet Earth. Everything shares the same codebase. Looking at the diversity of life, you see some commonalities between life forms: specialization, ubiquity, cooperation. Natural selection is a slow process but tool selection moves faster. Technology gives us a leg up on the slow process of evolution. Technology surfaces similar trends. Pencils are specialized, ubiquitous (they are everywhere), cooperation (a pencil is made by groups/trade of skills). This is generally the way with technology, you can't do it alone. It requires us to work together. Human being makes a technology, and that technology augments the human. In the 20th century, though, we added software: a middle layer between the hardware and the human. These days, the software is becoming more important and hardware almost begins to fade into the background. At the root of the World Wide Web, was a need to allow people to collaborate across lots of different types of hardware. Industrialization to electricity to computers to internet to Web. All of these things were probably inevitable but their specific shape was not. Smartphones were likely to emerge but the iPhone was a specific invention/form created by specific people. Creating a technology is easy, getting people to use it is the hard part. People are allergic to change -Grace Hopper. You can try to fight it or work with it -don't try to change people's behavior but try to build on top of it. The Wold Wide Web was built on top of DNS (URLS), HTML (SGML), etc. This allowed people to start using it more easily. HTML requires you to build on top of what came before them. This is part of the design principles for HTML. Your goals influence your principles, which impact the patterns you use. How well does a technology work? Instead think about how a technology fails. Service workers, for example, fail exceptionally well -they only work as an enhancement. Web components, on the other hand, can fail badly or fallback gracefully depending on how you use them. The extensible Web exposes the building blocks (low-level APIs) of the Web to developers so they can create new services. Naming things is powerful: the extensive web, ajax, responsive Web apps, and now progressive Web apps. Most of these terms just bundle existing technologies together with a new label. PWAs are just https, service worker, and a manifest file. Who benefits from technologies? Developers or users? Service workers benefit users more than developers (lot of work to set up). Some tools sit on your "computer" (version control, pre-processors, build tools, etc.) these are inward-focused tools. Find what you like and use it. Other tools are outward-facing; they directly impact the end user. Tools like jQuery, bootstrap, etc. need to be downloaded; there's a cost for users. The fallacy of assumed competency: deciding to use something because someone else is. Often happens when people copy what other companies are doing. "Not invented here" is the other fallacy. You need to balance these. All computers are abstraction, all the way down. All software have assumptions. Find a technology that matches with your philosophy, this will allow you to work better. Otherwise, you'll butt heads. Maybe technology has a will, a desire. When mankind moved form being a hunter/gatherer to farming, people could not picture what was on the other side of that event horizon. We may be on the edge of a third one with the information age. No technology has ever gone extinct. Everyone is still used somewhere in the World by someone. Things may be inevitable, but we have the power to control the direction those technologies go. Ask questions: how well does it fail? Who benefits? What are the assumptions? Technology is a history of the people who made it. It's not "here's the future, take it." It's "here's the future make it."[...]
Mon, 03 Apr 2017 00:00:00 +0000
At An Event Apart in Seattle WA, Jefferey Zeldman talked through how to use research to help inform the Web site redesign processes. Here's my notes from his talk: From Research to Redesign
Mon, 03 Apr 2017 00:00:00 +0000
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
Mon, 03 Apr 2017 00:00:00 +0000At 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 ways through it. They have different goals, expectations, and preferred ways of learning. They also come in through different channels: personal reference, link, search, from a competitor, etc. Diverse Toolkit People learn new material best when they encounter it though multiple modalities and multiple times. So we want to have a diverse toolkit for on-boarding. Defaults: a strong set of defaults can help introduce people to a service. Layout and empty states can guide, while default settings can minimize the number of choices people need to make. Less then 5% of people change default settings. Inline guidance: weave information into surrounding content. Reactive guidance: information that is surfaced base on an action they've taken. This is a great way is to reinforce Proactive guidance: interactions that orient you to what is possible and how you can use it. On-demand guidance: people will always have questions that we can't predict. For that, we need on-demand guidance. We need more than one approach with multiple access points to support different paths through on-boarding. Long-term Guidance Start at the end to reveal key actions. What are the elements that make up a path toward success or failure? Start from the end and walk backward: how did they get there? Look at core users: who is going to sustain & support your business through their usage? But also look at unsuccessful users: how did they fall off? What caused them to churn and fall off? Look for common actions behind each outcome: what made people successful or not? Facebook: friending 7 people within 10 days of sign-up is their best indicator of long-term engagement. How do you find these key actions? Interviews, surveys, cohorts, data analysis, etc. Break key actions down to modules. Trigger, activity, follow-up: what is the feedback loop for a key action? It helps to look at these parts of an action to know where you can provide on-boarding guidance and how actions can connect to what's next. Add reinforcement: people need to see/do things multiple times in order to grok them. If we show something just once, you'll be lucky to remember 1/3rd of it. But repeating things regularly helps people retain info. Avoid mindless repetition: vary location, method, and frequency. Are people in an exploratory state or on a mission? Is the product established or novel? Answers to these questions, help you deci[...]
Mon, 03 Apr 2017 00:00:00 +0000At 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 well-crafted responsive design is device-agnostic. This helps us manage hostile browsers, tiny screens, slow networks, and many forms of input. The Web has inherent variability we need to embrace. 60% of the World's networks are sub 3G. These non-ideal conditions provide a great benchmark: will your site work in these situations? Emphasize conditions and features, not devices. What input methods does it support, what screen sizes, networks speeds and conditions are we designing for? Device-agnostic makes our patterns better prepared for the Web. This applies to not just our pages but all our atomic patterns as well. These need to be not only responsive but resilient as well. Building a responsive design isn't the hard part, the hard part is documenting how/when our styles need to adapt/change. Style guides have been rising in importance alongside responsive designs. These are becoming the de-facto artifacts that come out of responsive redesigns. They not only provide a shared repository of code and styles but also help bring developers and designers together through shared solutions and language. Creating a style guide. Step 1: create a visual inventory. Step 2: name and organize what you've found, group them into clear groups. Step 3: translate that inventory into HTML and CSS; Airshots and Fractal are great examples of style guide generator tools. The most important part of this process is the one we talk the least about: naming & organizing patterns. Modularity requires significant effort and commitment. Start with language, not interfaces. Naming and language create a shared understanding around your patterns -which, in turn, creates more consistent design. A style guide's success or failure often hinges on the words we use to talk about it. You need alignment on language systems that are meaningful to your organization and to the people who need to support them. A good style guide focuses on the content and functionality that each component supports. The goal is to integrate your design language in how your organization communicates. Design patterns and principles together provide a compass to help guide where we're going. No one can answer where we're going. The web doesn’t evolve in a straight line. We can’t assume it will be viewed on better & better devices by people like us. We need to embrace t[...]
Fri, 24 Mar 2017 00:00:00 +0000
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:
Fri, 24 Mar 2017 00:00:00 +0000
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:
Fri, 24 Mar 2017 00:00:00 +0000
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:
Fri, 24 Mar 2017 00:00:00 +0000
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:
Fri, 24 Mar 2017 00:00:00 +0000
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:
Wed, 12 Oct 2016 00:00:00 +0000
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.
Thu, 11 Feb 2016 00:00:00 +0000
In her Bug Fixes & Minor Improvements, Writ Large presentation at Webstock 2016 in Wellington New Zealand, Anna Pickard shared the thinking behind Slack’s app release notes and communication with their customers. Here's my notes from her talk:
Thu, 11 Feb 2016 00:00:00 +0000
In his The Shape of Things presentation at Webstock 2016 in Wellington New Zealand, Tom Coates shared his latest thoughts on designing for the Internet of Things. Here's my notes from his talk:
Wed, 10 Feb 2016 00:00:00 +0000In his The Map & The Territory presentation at Webstock 2016 in Wellington New Zealand, Ethan Marcotte shared his thoughts about the changing definition of the Web and his philosophy for making broadly accessible experiences. Here's my notes from his talk: In 1807, New York's population was clustered in the bottom part of the island where rivers, over crowding, and disease ran rampant. Civic planning was needed. John Randel Jr. was assigned to re-plan the streets. He created a structured plan that defined New York's famous street plan today. Randal developed a new map for New York. This system was designed for use to create regularity. Randal’s map was attempting to define a new territory: what could a territory be or should be. Maps capture our understanding of a space. They make us aware of our surroundings and make things feel a little less foreign. We’ve been focused on a relatively small portion of the Web: a few desktops & laptops. Five years ago, our view of the Web was much more limited. We were overly concerned about a few fixed width views of our layouts. The three main ingredients of a responsive design: fluid grid, flexible images, and media queries. This is an attempt to embrace the fluidity of the Web and design across device boundaries. This simple recipe has blossomed into lots of amazing examples. Notable examples include: An Event Apart, Currys, Expedia, Coop, Disney, Time, The Guardian, BBC News, and more. We’re drawing a new map and marking it with new sites both responsive and device specific. But this map is far from complete. Toward a New Map Many sites have been having success with responsive design. The Boston Globe and several e-commerce sites have published statistics about the positive impact responsive redesigns have had. The Tehan-Lax and Oakley Moto sites (originally launched at 84MB) are very beautiful designs but very large in terms of file size from 6MB to 21MB. Responsive design has often been criticized for being too heavy (not performant enough). But the truth is most Websites are much to heavy for today’s reality. Internet.org designed to get people better access to the Web in developing markets weighed 4.3 MB. The Apple Mac Pro website is 33.4MB -its not responsive. In 2009, the average size of a Web site was 320kb. Today in 2015, it is 2.2MB. Every two years, we’ve doubled in size. Moore’s law has not kept up with bandwidth. The map is not the territory. It can't capture all the detail of the complexity of what's around us. We may be doing the same for the Web. Our map of the Web is made through a vision of the Western world. We've mistaken the map for the territory. We think mobile devices are always on, always connected, and uniquely yours. But this isn't true around the World. 9.2M people live in 300 square kilometers in Dhaka, Bangladesh. There has been a 900% increase in mobile Internet access in these developing cities. The next wave of urbanization is helping in these areas. More people in the world have mobile devices than access to toilets and latrines. In Africa, 60% have mobile devices (700M). That’s more than have access to clean water. Mobile devices are shared across multiple people in many developing nations. This is slowly changing as smartphones get cheaper. What’s happening in these developing areas is emblematic of what’s happening across the World. A large portion of the world is coming online now, on less capable devices and networks than we are used to. Are we ready for this new reality? The Web doesn't evolve in one straight line. Is our work prepared for the new face of the Web? For low powered devices and poor access. Is this the new normal? Who does it change [...]
Tue, 02 Feb 2016 00:00:00 +0000In her presentation at Google today, Stephanie Rieger shared how commerce is evolving (and in many cases innovating) in emerging Internet markets. Here's my notes from her talk: Exploring the Just-in-Time Social Web. The Web was first conceived about 25 years ago from mostly European origins. For the following 15 years, most of the internet's users and companies came from developed countries. The people who founded the Web were the ones who built it and consumed it. Today the situation is quite different. Internet penetration is nearing saturation in developed economies but fast growing companies are emerging from places like China, India, and Russia. There's close to 3 billion people that have yet to come online and thanks to cheap mobile devices, their barriers to entry are quickly falling. A New Kind of Web So the Internet that the next billion people "discover" isn't quite like "ours". For example, people in Kuwait are sleeping sheep on Instagram. This creates a lot of ad-hoc businesses. These businesses provide a glimpse of a new, digital, and mobile-fueled informal economy. "Informal" businesses are relatively ad-hoc. They use chat for negotiations and Facebook pages as store fronts. These services don't offer a great experience but they are "good enough". They balance reach, effort, functionality, and adaptability to local circumstances. Most of these businesses get their largest growth from the countryside, where brick and mortar shops are under-developed. But these businesses reach cities (very big, high density, lots of middle class) as well. Opening enough stores to serve 700 million urban residents is very expensive. Mobile fills this gap. In China shopping on mobile is the primary way of buying things. Chinese commerce is 90% through online marketplaces vs. in the US 76% is through online merchants. So in China, sellers and buyers find themselves online in large e-commerce platforms like TMall. Even large brands have big digital storefronts on TMall. Taobao is like eBay in China but very social as vendors aren't limited to selling things, they also sell services like travel planning. Running a shop on Taobao is a national pastime, like a second job or hobby for tens of thousands of Chinese. Digital commerce services in China are a mix of Amazon, eBay, and PayPal, with a dash of Google. They've evolved differently. Alibaba is bringing digital services to rural communities by identifying people who can order for villages. "We give them a computer and the start taking orders for the whole village." The Chinese model is moving to other countries like Jumia in Africa. They are trying to leapfrog brick and mortar commerce with online selling. Starting with Social With millions of vendors, how do you find stuff? Online shopping neighborhoods are created through social media where people can curate lists. These sites get a cut for each transaction. Part of the reason these services work because they feed of a cycle of mobile and social media adoption. Developing markets are going straight to social. When they come online, they just jump into social networks as their onramp into the Internet. The most poplar social media services are platforms. WeChat is a great example of integrating wallet, blogging, rss, messaging, etc. There's thousands of apps inside WeChat, you can book doctors, talk to stores, etc. WeChat adresses daily and hourly needs not monthly active users. There is no Web in WeChat its all inside the platform. Ironically, though many people reach WeChat mini-apps through Web pages and QR codes. Payments In sub-Saharan Africa, 1/4 of adults have accounts at formal financial instituti[...]