Preview: Functioning Form: Interface Design
LukeW | Digital Product Design + Strategy
Expert articles about user experience, mobile, Web applications, usability, interaction design and visual design.
Published: Thu, 27 Apr 2017 00:00:00 +0000
Last Build Date: Thu, 27 Apr 2017 00:00:00 +0000
Copyright: LukeW Ideation + Design
Video: Mobile in The Future
Thu, 27 Apr 2017 00:00:00 +0000
For the past five years, I've presented an overview of the mobile design topics, insights, and solutions I've been focused on at Google's Conversions event in Dublin. This year's video recording on what's changed in mobile design over the past ten years and where we could/should go next is now live.
While the complete video runs almost three hours, in the first ninety minutes I walk through how we've learned to optimize key flows on mobile over the past ten years and how we can continue to improve with inspiration from 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.
class="videoplayer" src="http://www.youtube.com/embed/xiyOTcVHqHw?rel=0" frameborder="0" allowfullscreen>
All Annual Sessions:
Big thanks to the Conversions@Google team for making these sessions available to all.
An Event Apart: Evaluating Technology
Tue, 04 Apr 2017 00:00:00 +0000
At 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 [...]
An Event Apart: From Research to Redesign
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
- There's no such thing as a universal layout: every organization, and therefore their sites, need unique solutions based on what they do & how they do it.
- Our job as brand designers is to identify what makes each service unique and bring that to life.
- What should we make? We need to understand how we can help customers and stakeholders create the right experience.
- Up front, make use of research to learn about your client and their market. Research not only informs you but also creates connections between you and your client. You learn about their customers and how to motivate them, this makes you a lot more valuable and gives your client more reasons to listen to your recommendation. You also uncover blind spots and biases that exist in an organization.
- Research helps you understand your market, find high-value customers, and reveal worthwhile goals.
- Anybody can do research. There's many ways to collect data. You can do it and its very worth your time.
- Looking at other customers in your market, can tell you what what patterns are worth doing, which are not. For instance, unique features that align with specific domains, customer needs etc. (online chat, custom products, save for later features, customer reviews, etc.)
- Conversion doesn't always happen in the short term, you need to support long term cycles as well. The less you ask of your customer, the more likely they are to comply. If you do need people to do things, explain why. Forcing conversions usually doesn't work.
- You need to make brand decisions: who is the service for? who are you trying to appeal to? And reflect that across your service.
- Everything needs to be thought out from the point of view of your customer, not just from your internal point of view.
- If the site is doing the wrong things, doing A/B testing on it will not give you the data you need.
- Work with and talk to relevant people as much as you can. This reveals knowledge & helps you build consensus. Be a good listener and ask lots of questions.
- Data helps inform your decisions. It is only as good as the people looking at it. There's no substitute for having a product direction and brand story.
- A vision tells you what to measure after your redesign and what to work on next.
- A stronger human connection with the people you need to work with is the real value of research.
An Event Apart: Practical Branding
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
- 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 story: logo, color, tone of voice, social ecosystem, typefaces, art direction, authentic story-telling, and company values.
- Logo is a great foundation for your brand but it isn't the full story. Great logos can be drawn in the sand with your toe. Think in terms of memorable silhouettes.
- Tone of voice needs to be defined by a company and only refined by a copywriter. Not the other way around. Tone of voice applies to not only your content but your social channels, support, and more.
- You don't need to have a presence on all social channels, pick the ones that are most appropriate for your brand/message and do a great job there vs. an ok job everywhere.
- Typefaces: you want to build an ownership (a typeface equity) that stems from your consistent use of a font pairing. Fonts in Use helps you find what other brands are using.
- There’s no excuse for using stock photography any more. Between the cameras in everyone's phones, you can source/get very authentic/appropriate imagery for your company.
- Every brand has a story, tell it. Talk to people about company histories; those that have been there the longest know.
- If you're using a slogan, it's a red flag that need to tell your brand story in a better way.
- Find your authentic story within your company, this will be a great inspiration spark. What equity can you create from type, color, and art direction? Can you source some of this from your customers? Can you create tension through contradictions?
An Event Apart: On-boarding for Any Situation
Mon, 03 Apr 2017 00:00:00 +0000
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 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.
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.
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 th[...]
An Event Apart: Design Beyond Our Devices
Mon, 03 Apr 2017 00:00:00 +0000
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 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 li[...]
Conversions: Psychology Behind Mobile Behaviors
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:
- 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 are more likely to experience pleasure with it. This leads to higher purchasing intent & repeat experiences.
- Increase contrast between text & background; simplify language; have direct, tangible calls to action.
- Hedonic Adaptation: we become accustomed to positive or negative stimulus over time. The more exposed to something we are, the more bored we get with it.
- Don’t give people a chance to get bored. Update product frequently; change layout structure; alter user experience: don’t do this in a way that pisses people off. Make smaller changes and test to not break things. There needs to be a balance between familiarity and new.
- Dopamine is a chemical that causes pleasure seeking behaviors: makes you look for rewards.
- Habitual products create dopamine loops: we seek more than we’re satisfied, anticipating rewards creates more response than when actually getting the reward. External triggers kickoff loops.
- Small, unpredictable rewards elicit the highest rate of engagement (like gambling).
- Understand the principles of persuasion to design the right experiences across devices.
Conversions: Faster Mobile Sites, More Revenue
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:
- 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.
- Too many redirects: DNS lookup + connection + data together take time for each redirect.
- Mobile site speed should be considered a profitable site feature.
Conversions: Building a Testing Culture
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:
- 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 test sizes.
- A/B testing is predicated on trusting the tools you have. Without trust in tools, you can't have a culture based on testing.
- 75 product teams at Booking.com each made up of complete teams of designers, engineers, product owners, writers, etc. They are able to tightly integrate with horizontal support teams for each of these domains to create community, training, and more.
- What kind of skills do you need in an A/B testing organization? entrepreneurialism, arability, humility, curiosity, statistics, analysis
- Throw out your roadmap, and trust in the process and your people. Go where the tests take you. That may end up in a different place than you envisioned but it is where your customers are taking you.
- You need to ensure people know what is the right thing for your business. Invest in training. You can't have a culture of trusting your people, if you don't train them in how your business works.
- As a leader in a testing organization... are you willing to be wrong? Are you willing to be told you are wrong? Repeatedly?
- Scale of impact of individual tests is quite small but when applied to a large scale business, it matters.
Conversions: Next Generation Web
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:
- 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.
- 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 when to come back & why), reliable performance (pages need to work regardless of connectivity).
- Web sites can prompt users to add them to a home screen, with no need to wait for an app download. This opens the site in a full-screen view.
- Push notifications are now available in the browser, ask for permissions and send notifications.
- Poor connectivity on mobile can cause Web pages to fail. Service Workers can cache content and when people are offline, you can use local content instead of going to server for content.
- This suite of new capabilities is referred to as Progressive Web Apps (act and feel like native web apps but live on the Web). PWAs take advantage of the latest technologies to combine the best of web and mobile apps. Think of it as a website built using web technologies but that acts and feels like an app.
- 66% of purchases on mobile happen on the web.
- Mobile Web conversions are 66% lower than the desktop. Many reasons for this, but one is typing is hard. One-tap checkout helps solve this. The browser stores payment info and sites can ask for it at the moment of checkout. This is the PaymentRequest API.
- 54% of people will quit if they have to fill in another sign-up form on mobile. Credential Manager is an analogous API that stores identity for people and sites can access them. Friction-free way to get people into an authenticated state.
- More browsers are adopting these APIs and technologies. Public announcements from major browsers suggest they are willing to support these improvements.
- Housing.com saw a 38% conversion increase when Web pages were boosted 30% in page speed. It costs Housing.com $0.07 to acqure a Web user vs. $3.75 to aquire an Android user.
- Make My Trip first time PWA users book 3X more than app users.
- 76% increase in conversions on Alibaba mobile site, +14% and +30% Android monthly active users.
- How do you get started? 1. Move your site to https. 2. add features vis progressive enhancement.
Conversions: Mobile Patterns for Experiments
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:
- 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 investment.
- We change stuff without evidence or observation. We build stuff nobody wants or needs. Product changes are not measured or tested. We build what internal people want, not customers. Ego is the enemy of all good work. A lot of Internet design is infused and driven by Ego.
Testing & Optimization Power-ups
- Don't test unless you have enouh traffic for it to matter. Grow first.
- Don’t copy stuff blindly: everything is unproven until tested against your specific audience/product.
- Prioritize your test ideas. Score all your testing ideas, then decide what to focus on.
- Get a hypothesis: Because we saw [data/feedback], we expect that [change] will cause impact, that we can measure using [metric/data].
- Record the design people see, tests can look different across all devices. Build, borrow, or use a third party service: how does your experience look on different devices/mobile?
- Audit your Google Analytics to make sure it is set-up properly.
- Get a writer. Copy writing is a real job, you’ll make more money than you spend.
- Look at the big picture in addition to the details. Both these spaces help you solve problems.
- Stop wasting money on things that don’t work; or aren’t actually needed.
- What is very simple and converts well… is really hard to do well.
Video: Obvious Always Wins
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.
class="videoplayer" src="http://www.youtube.com/embed/OkeJg92PA4E?rel=0" frameborder="0" allowfullscreen>
In part two I answer audience questions and cover responsive web designs, native applications, form conversions, touch gestures, navigation, cross-platform consistency and more.
class="videoplayer" src="http://www.youtube.com/embed/1jUaGin7YTM?rel=0" frameborder="0" allowfullscreen>
Thanks to the Conversions@Google team for making these sessions available to all.
Webstock: Bug Fixes & Minor Improvements
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:
- Words are good. Writing is one of the oldest techniques in the World but different forms of media have influenced how people write: stone tablets, pulp magazines, etc.
- And now a new genre of writing has emerged inside of mobile app release notes: the copy that tells you when new features are released and bugs are fixed in an app release.
- Release notes now contain poetry, stories, jokes, and more. People are responding with joy when they get new updates from their favorite apps. This is a great way to connect with your users.
- Writing can happen in places where no one expects to find it. This creates an element of surprise.
- App release notes used to be terribly boring: “additional bug fixes” and “minor improvements”.
- Release notes aren’t intrusive, they are optional. People don’t need to read them but can if they want.
- Release notes tell people they are being heard, their bugs are being fixed, the things they can do with the app, and that the team cares.
- Slack began to write extensive release notes because they care about communication, their team comes from the era of blogging, of self expression.
- Courtesy is a critical part of release notes. You need to know when to talk and when to listen. When things go bad, respond to as many people as you can.
- Empathy: tell people when you are moving things; listen to people and tell them how to make things work for them.
- Playfulness: look at the World sideways, be curious and interested. Do more than what is expected of you.
- Being real people and reflecting that to others helps create real relationships. It shows the humans behind the scenes.
- Color to the edges, even the parts no one can see. Say nice things in places no one expects to see them. Authentic, unfiltered voices are the truest form of Internet communication.
Webstock: The Shape of Things
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:
- People used believed there would just be a few large computers that took care of our needs. They genuinely believed there wouldn’t be lots of little computers everywhere.
- This year there will be 1.5 billion smartphones sold. In one human lifetime we went from essentially nothing to billions of computers shipped each year. There’s no sign of a slow-down.
- In the future computers will be integrated into everything even when they only make tiny improvements. We already have smart ovens, scales, cleaners, security systems, batteries, etc.
- You should use the network to amplify a tool’s core purpose not to be another Web browse or Twitter client.
- There’s a push in the design industry to integrate software and physical objects. But we should be doing the reverse.
- Many believe the world of screens and icons is an abstraction and that we should get back to manipulating the World as we used to: with our hands. The metaphor is enhancement: take an ordinary object and give it magical properties through network integration. The process is moving from abstraction to tangible interactions.
- But is this really the answer to how we interact with networked objects? Perhaps not because the power of connected objects is in the connections. And those are hard to display physically.
- An embodied object is not the same as the Internet of Things. We want our environment to respond to us not each individual objects.
- Imagine if every object is completely intuitive because of interfaces optimized for specific tasks. You have to learn each of these UIs. But with a general purpose interface, you only have to learn to use it once to enable a variety of tasks.
- What we should do instead is push the service layer further: to detach even more from objects. As an example, ZipCar uses very little hardware and is 95% service layer. All the value lies at this layer.
- The ideal service layer: gives you control; supports you from initial set-up to the day you recycle it; understands it will be used by multiple people (the World is multi-user); is able to work easily with other devices; does not expect you to be a programmer; communicates clearly and politely in ways that are timely and familiar.
- These six principles are important for any Internet of Things service layer. Thingdom is trying to build a UI layer that is rooted in social networking models and includes “robot butler” style prompts.
- This type of service layer will ultimately exist for the planet. It will define how we interact with the World. Someone will build this, and infuse it with their ethics and beliefs. Get involved so your views are integrated.
Webstock: The Map & The Territory
Wed, 10 Feb 2016 00:00:00 +0000
In 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[...]