Tech News

When we observe people using our sites, we find app install banners can have negative unintended consequences. So it's probably worth asking, how do we end up with issues like these? This five minute clip from my Mind the Gap talk takes a look.

Transcript

Most of these web pages are designed this way because these techniques work, right? I mean, app install ads. They happen everywhere, from e-commerce to publishing and beyond.

While they come in many shapes and sizes, they're there to get people to download native mobile applications. So how effective are they? Well, as usual, it depends on what we mean by effective.

It turns out, if you put a full screen interstitial with a big button in front of people, some portion of them will click. In this example we published from Google, about 9% of people click the big Get the App button. Success, right?

It's a pretty good conversion right there. But the other half of the story is that when we tested removing the full page interstitial, app downloads only dropped 2%, but daily active users on the web went up 17%. What's the last A-B test you did that had that kind of impact?

Perhaps removing things is a great idea for many of our tests instead of just adding stuff. So if you're measuring active users instead of conversion on app install button clicks, the definition of what's good quickly changes.

When we observe people using our sites, we find app install banners can also have a lot of negative unintended consequences. In this example, this user is trying to purchase some rosy pink shimmer. And though they've already selected the product they want, they can't seem to find something really important.

So they scroll down, they scroll up, they begin to scroll to the left and to the right and back again, searching for that elusive Add to Cart button. After all, once they have a product they'd like to purchase, the next step is actually checking out. But try as they might, nowhere on the screen is an Add to Cart button to be found.

Scrolling doesn't seem to turn it up. So where could it be? Going down again and down further, coming back up, still nothing. You'd expect it to be somewhere right around here, wouldn't you?

Well, out of desperation, perhaps they'll tap the little almost cart-like icon at the top. No, nothing there either. Well, coming back again, perhaps they'll be able to find it. Let's see how that works. Nope, still not there.

Nothing in the cart, nothing on the page. Finally this person decides to do is tap the little X down by the Sephora app ad. And there, lo and behold, an Add to Basket option.

In examples like this and others, app installed banners were the direct and sole cause of shopping cart abandonment. In Baymard Institute's testing, 53% of sites displayed one of these banners.

Here's another example. Let's say you want to take a look at this shelved ottoman a little closer. So you tap to zoom and then you... Well, unless you close the app install banner, you can't actually get back to the page where you purchased it.

Which again, if you ask most e-commerce company what metrics they care about, sales conversion is pretty high on the list. So having a user experience that negatively affects that seems like a pretty big deal. And as a result, it's probably worth asking, how do we end up with issues like these?

How can these prevalent app install banners be the direct and sole cause of abandonment when abandonment is the opposite of what we're looking for? Is this a user experience design problem?

Maybe it's because these companies aren't investing in user experience. But when I did a quick job search, I found that not only do they have user experience design teams, but pretty much all of them tout the importance of user-centered design on their business in these listings.

Not only that, the job descriptions are filled with superlatives on the impact and importance of great user experience design. So what's going on?

Because like you, I don't find these web experiences to be very user-centric at all. In fact, I'd characterize most of these as user hostile. And it's not just these companies. And I really don't want to single out anyone in particular. But you don't have to look very far to encounter these kinds of experiences on the web today.

Often I hear all this is because business goals are outweighing design goals. PM made me do it. Legal made me do it. But as we saw with app interstitial banners, important business goals like daily active users and e-commerce conversions are taking a hit with these approaches.

So why would the business side of the team be forcing us to do this stuff?

Read the book, Typographic Firsts

Steven Heller takes a closer look at Beast of England’s new Acorn font family in this latest issue of Font of the Month.

The post Steven Heller’s Font of the Month: Acorn appeared first on I Love Typography.

To date, most digital image and video editing tools have been canvas-centric. Advances in artificial intelligence, however, have started a shift toward more object-centric workflows. Here's several examples of this transition.

In canvas-centric image or video editing software, you're adding, removing, or changing pixels (or vectors) that represent objects. Photoshop, used by 90% of the world's creative professionals, is a great example. Its ever increasing set of tools is focused on pixel manipulation. A semantic understanding of the subject matter you're editing isn't really core to Photoshop's interface model.

In an object-centric workflow, on the other hand, every object in an image or video is identified and you can perform editing operations by changing the subject of each. For instance in this example from RunwayML, you can change the character in a video by just dragging one object onto another.

Object-centric workflows allow entities to be be easily selected and manipulated semantically ("make it a sunny day") or through direct manipulation ("move this bench here") as seen in this video from Google Photos' upcoming Magic Editor feature.

Similarly, the Drag Your GAN project enables people to simply drag parts of objects to manipulate them. No need to worry about pixels. That happens behind the scenes.

Object-centric features, of course, can make their way into canvas-centric workflows. Photoshop has been quick to adopt several (below) and it's likely both pixel and object manipulation tools are needed for a large set of image editing tasks.

Despite that, it's interesting to think about how a truly object-centric user interface for editing might work if it was designed from the ground up with today's capabilities: object manipulation as the high-order bit, pixel editing as a secondary level of refinement.

Read the book, Typographic Firsts

Looking for a new sans serif typeface to add to your design arsenal? Look no further! We’re currently offering six of our most popular sans serif typefaces at a special sale price.

The post Save Big on 6 Popular Sans Serifs appeared first on I Love Typography.

What happens when AI eats your Web site? The information you've spent years publishing gets reassembled in a new way for people to interact with your content. So far, we've integrated text-based articles and audio files into this experience on Ask LukeW. Today we're adding over 6,000 minutes of video as well.

The Ask LukeW feature is powered by AI models that break down content into related concepts and reassemble it into new answers. When that content is sourced from an article, audio file, and now video file, we cite it and give you the ability to go deeper into the original source file.

In the example above, the information about loading indicators is sourced from two different videos which are linked in the source card to the right. Selecting one of these videos opens an integrated (within the broader conversational UI) video experience that looks like this:

The inline video player starting point is set to where the answer is mostly sourced from. I say "mostly" because a LLM generated answer may pull from multiple points in a video file to create a response, so we start you in the right vicinity of the topic being discussed. Below the video player is an indication of who is speaking that also serves as a scrubber to let you move through the file with context by displaying the current transcript directly underneath.

You can access the full speaker separated transcript and search within it as well. The transcript is generated with an automatic speech recognition AI model and diarized to indicate who is talking at any given time.

For each video file integrated within Ask LukeW, we make use of LLM language operations to:

• summarize the video file
• extract speakers, locations, key topics, and even generate a title from the video file (if we lack the data)
• create follow-on questions to ask based on the content of the video file
• enable people to ask questions using just the content within the video file
• generate answers in response to what people ask

It's like there's AI models everywhere. We even did a bit of machine learning to automate thumbnail selection for the videos. Just generate several thumbnails from each video, train on a few examples, and away you go.

Lastly but not least, we added the transcript search feature to all the audio files in Ask LukeW as well.

For more on how AI continues to eat this Web site, check out these earlier articles or go Ask LukeW about it.

Further Reading

• New Ways into Web Content: how AI enables a different way of interacting with a Web site
• Integrated Audio Experiences & Memory: enabling specific content experiences within a conversational UI
• Expanding Conversational User Interfaces: extending chat user interfaces to better support AI capabilities
• Integrated Video Experiences: adding video-specific experiences within conversational UI

Much thanks to Yangguang Li (front end), Thanh Tran (design), and Sam Pullara (back end) in helping these explorations move forward.

Augmented reality has the potential to bring digital actions and information to the real world. But what user interface paradigms could help make this a reality? Here's some speculation and pointers to more.

For an augmented reality system to enable digital interactions with the real world, it would likely require the ability to:

• identify objects in the real world
• select objects in the real world
• choose and take actions on selected objects
• get results based on those actions

Adding digital objects in the real world and interacting with them is, of course, also possible but veers into Mixed Reality use cases. So for the sake of simplicity, I'm not focusing on digital object creation and manipulation... think more AR than VR.

Use Cases

What kinds of use cases could actually "augment" reality? That is, give people abilities they wouldn't otherwise have through the addition of digital information and actions to the physical world. Here's a few examples:

Identifying Objects

There's lots of things around us at all times which means the first step in identifying objects is breaking reality down into useful chunks. Meta AI's Segment Anything Model has learned a general notion of what objects are and can generate masks for any object in an image or video. When coupled with a visual captioning model like BLIP each of these object masks can be labeled with a description. So we end up with a list of the objects in our vicinity and what they are.

Selecting Objects

Once our field of vision (real time video) is segmented into objects and labeled, how do we actually pick the object we want to act on? One option is to rely on audio input and use it to search the object descriptions mentioned above. Imagine the following but with speech instead of text-based searching.

Another option is to allow people to simply point at the object they want to take action on. To do so, we need to either track their hands, eyes, or provide them with a controller. The later is what the LITHO team (I was an advisor) was working on. LITHO is a finger-worn controller that allows intuitive and precise gestures through a touch surface on the underside, a custom haptic feedback system and an array of motion-tracking sensors. Basically it allows you to point at objects in the real world, select, and even manipulate them.

We can also detect and use eye gaze and/or hand gestures for selection and manipulation. For end users this usually means remembering discrete gestures for specific interactions instead of relying on physical controls (buttons, etc.). As you can see in the video below, the technology to detect even complicated gestures in real time has gotten quite good.

In all cases, we need to let people know their selection took effect. Several ways that could be done: pointers, outlines, masks, and more.

Taking Action

Now we've got the right object identified and selected... time to take action. While I'm sure there's been many "an app store for augmented reality" discussions, maybe it's time to boil things down to actions instead of full-blown apps. Most Web, mobile, desktop, etc. applications have loads of features, many unused. Instead of a store filled with these bloated containers, an augmented reality system could instead focus on the more atomic concept of actions: translate, buy, share.

Since we've identified and labeled objects, we can probably guess what actions are most likely for each, easing the burden on users to find and pick relevant options. Different entities could provide these actions too. Think: translate with Google, buy with Amazon, and so on. People could set their preferred provider as a default for specific actions if they choose too: "always solve with Wolfram Alpha".

With all these actions available, how do you pick? Once again we can lean on speech, hand and/or eye gestures, or a minimal wearable controller. And again I kind of like the explicit intention you get from a hardware controller: press the button to talk, scroll the surface to browse, and so on -especially when conveniently located for one-thumb interactions.

Getting Results

So what happens when we take action on an object in the real world? We expect results, but how? Personally, I don't love the idea of plopping graphical user interface (GUI) elements into the real world. It feels like dragging along the past as we move into the future.

Direct object manipulation, however, has its limits so we're probably not done with menus and buttons just yet (sadly).

To go way back, the original Google Glass had a pretty cool feature: a bone transducer that amplified audio output so only you can hear it. Take action on an object and get audio responses whispered into your ear (pretty cool).

What will actually work best? We'll see...

Most mobile e-commerce sites can be improved. But how? This six minute clip from my Mind the Gap presentation provides a step-by-step walkthrough of how to make a standard mobile e-commerce Web site more effective and why with supporting data and design tips.

Transcript

To illustrate, let's look at an example in e-commerce. I ended up on this one because it made a top 10 e-commerce designs list somewhere. When I followed the link though, I only found two things: an app install banner and a full screen email newsletter promo. Not a great start.

So, I did what most people do and dismissed the pop-up, revealing a promotional banner, an icon-only navigation system, and a feature carousel. Encouraged by how my dismissal of the free shipping interstitial began to reveal more useful content, I tried removing the two promos at the top, and something really interesting happened. I got to a list of categories. Which doesn't seem all that compelling until you consider the impact of this UI.

In a few tests, Growth Rock compared standard e-commerce feature carousel-based layouts with ones that included a few top-level categories, making it clear what kind of products are available on the site. The result was a 5% increase in completed orders. Note the metric we're tracking here. Not clicks on the links, but actual impact on meaningful things, like completed orders.

There was also evidence they ran a similar experiment in another vertical, in this case for an ice cream retailer. Listing their categories up front led to a similar jump in category page views, and in this case, a 29% increase in completed orders.

Another example comes from Google's mobile optimization efforts, where they saw a similar outcome. Edgars is a large fashion retailer in South Africa. They removed the animated banners, introduced some high-level categories near the top of their screen, and saw an increase in revenue per visitor of about 13%. So it seems like getting the categories on the site to be more visible is a good idea, especially if we are tracking impactful metrics like sales.

But there's more we can do here to help people get the value of this product and close that third gap. So next we'll tackle the icon-based navigation system. It's worth mentioning that even the icons we take most for granted, like the search icon, are not as universal as we'd like to believe. So let's clarify the search function a little bit.

Instead of using just icons for a critical function like search, we're going to be more explicit in our product UI and close the gap between what something is and why it exists with a search bar. This also gives us a chance to call out popular items and again, reinforce what the site has to offer. I specifically call search out as critical because exposing it by default can also help with conversions.

In this case, boosting the number of searches as the conversion rate for users who search is usually higher than for users who don't interact with it, probably because they have specific intent. So now we have a pulled out search area, category links exposed, and well, how else can we make it easier for people to get to the value of this product?

It turns out if we drop the featured image, which probably doesn't drive that much in the way of core metrics, we can show some of the actual products this site sells. Imagine that, showing popular or trending products on an e-commerce site. But let's not just show two.

Let's center this module to get more content on the screen and make the images run off the side a bit so people can scroll for more. Right where the thumb is for easy one-handed scrolling. This puts the ability to browse top products in a comfortable to reach zone on large screen sizes. Should make all our one-handed millennial users super happy. Because they'll scroll.

Pinterest found that even removing core features like the number of pins and likes in onboarding increased the number of photos they could show people at any given time, which increased the likelihood they'd find content they like and thereby become an active Pinterest user. Same principle applies here.

Overall, I think we've made progress on getting people to experience the value of this site a bit more directly. We could do even better maybe by putting the products up top and categories next. The goal is to get people from the state of, huh, I think I want to get out of here, to I get it, looks like my kind of thing.

But you may say, Luke, what about that free shipping promo? They were making a really big deal out of that, so it must be important, right? Indeed, the top reason for abandoning a shopping cart after browsing is shipping costs, taxes, etc. So free shipping is a winner and people should know about it. I'm not against that. I just contend that there's probably a better time and place for it.

Perhaps on the product page or the actual checkout experience when total cost is on most people's minds. The tricky but very valuable thing that makes mobile design hard is finding the right time and place for things. It usually isn't right away on the home page with everything.

We can do this all day, but I'll add just one more consideration to this redesign. It's quite possible when someone looks at this design, they could say, but what about the brand? Now, I hope it comes through in the fonts, colors, and especially the products. What people mean when they say that is something more like this, some aspirational imagery that reflects the personality of the company, serves as a hook for people to dive in, like this edgy Mad Max style look.

And I agree, our site design is looking a little too plain. So, we can add in some brand imagery to bring back some soul. But even with this addition, I'd argue we still retain a lot of the functional benefits we've been adding, or rather emphasizing by removing other things. Just be mindful that the reasons we're adding the brand imagery are tied to customer needs and not just the agenda of some department, like brand marketing.

Else you'll end up back at the product experience that mashes up the agenda of multiple teams. Which is increasingly the norm out there. Now, I focused a lot on free people, but they're certainly not alone, looking at a number of other e-commerce sites.

Read the book, Typographic Firsts

In part one, we took a look at three typefaces recommend for fashion or luxury brands. Of course, your final decision about font choice will depend on a variey factors, such as the brand's personality, its target audience, and the kind of message it wants to convey. And, although, we tend to typically associate high contrast typefaces with high fashion, they're by no means our only choice.

The post Fonts for Luxury Brands: part two appeared first on I Love Typography.

As artificial intelligence models extend what's possible with human computer interactions, our user interfaces need to adapt to support them. Currently many large language model (LLM) interactions are served up within "chat UI" patterns. So here's some ways these conversational interfaces could expand their utility.

To start, what is a chat UI? Well we all spend hours using them in our favorite messaging apps so most people are familiar with the pattern. But here we go... each participant's contribution to a conversation is enclosed in some visual element (a bubble, a box). Contributions are listed in the order they are made (chronologically bottom up or top down). And the size of each contribution determines the amount of vertical space it takes up on screen.

To illustrate this, here's a very simple chat interface with two participants, newest contributions at the bottom, ability to reply below. Pretty familiar right? This, of course, is a big advantage: we all use these kinds of interfaces daily so we can jump right in and start interacting.

Collapse & Expand

When each person's contribution to a conversation is relatively short (like when we are one-thumb typing on our phones), this pattern can work well. But what happens when we're asking relatively short questions and getting long-form detailed answers instead? -a pretty common situation when interacting with large language model (LLM) powered tools like Ask LukeW.

In this case, we might want to visually group question and answer pairs (I ask the system, it responds) and even condense earlier question and answer pairs to make them more easily scannable. This allows the current question and answer to clearly take priority in the interface. You can see the difference between this approach and the earlier, more common chat UI pattern below.

Here's how this design shows up on Ask LukeW. The previous question and answer pairs are collapsed and therefore the same size, making it easier to focus on the content within and pick out relevant messages from the list when needed.

If you want to expand the content of an earlier question and answer pair, just tap on it to see its contents and the other messages collapse automatically. (Maybe there's scenarios where having multiple messages open is useful too?)

Integrated Actions

When chatting on our phones and computers, we're not just sending text back and forth but also images, money, games, and more. These mostly show up as another message in a conversation but can they also be embedded within messages as well.

As large language model (LLM) powered tools increase their abilities, their responses to our questions can likewise include more than just text: an image, a video, a chart, or even an application. To account for this on Ask LukeW we added a consistent way to present these objects within answers and allow people to select each to open or interact with it.

Here's how this looks for any articles or audio files that come back as sources for generated replies. Selecting the audio or article object expands it. This expanded view has content-specific tools like a player, scrubber, and transcript for audio files and the ability to ask questions only within this file.

After you're done listening to the audio, reading the article, interrogating it, etc, it will collapse just like all the prior question and answer pairs with one exception. Object experiences get a different visual representation in the conversation list. When an answer contains an object, there's a visual indication on the right in the collapsed view. When it is an object experience (a player, reader, app), a more prominent visual indication slows up on the left. Once again this allows you to easily scan for previously seen or used information within the full conversation thread.

Expanding, collapsing, object experiences... seems like there's a lot going on here. But fundamentally these are just a couple modifications to conversational interface patterns we use all the time. So the adjustment when using them in tools like Ask LukeW is small.

Whether or not all these patterns apply to other tools powered by large language models... we'll see soon enough. Because as far as I can tell, every company is trying to add AI to their products right now. In doing so, they may encounter similar constraints to those that led us to these user interface patterns.

Read the book, Typographic Firsts

Steven Heller takes a closer look at Barnbrook Fonts’ bold and angular font family, Hopeless Diamond.

The post Steven Heller’s Font of the Month: Hopeless Diamond appeared first on I Love Typography.

We've added a few new updates to the Ask LukeW feature on this site powered by large language models (AI) including an integrated audio experience, conversation memory, and more. Here's the details:

Over the years, I've had the pleasure of appearing on many podcasts and panels about UI and digital product design. When possible, I published links to these conversations on this site: adding up to over 70 hours of audio. Don't worry. I haven't listened to it all. And now... you don't have to either.

There's information in these conversations that doesn't exist in other formats (articles, PDFs, etc.), so we spent some time adding them to the embedding index of content powering Ask LukeW. Casual conversations are often not as information-dense as topically-focused written articles, so several adjustments were needed to pull relevant bits from these long audio files into useful responses.

In the example above, the information about my studies at the University of Illinois comes from a interview I did on the UX Intern podcast. Pretty sure I wasn't this concise in the original podcast which is linked to in the source card to the right if you want to check.

For each article sourced within Ask LukeW, we make use of large language model (LLM) operations to:

• summarize the article
• extract key topics from the article
• create follow-on questions to ask within each article
• enable people to ask questions using the content within the article
• generate answers in response to what people ask

The integrated (within the broader conversational UI) article experience looks like this:

Similarly for each audio file presented within Ask LukeW, we make use of LLM language operations to:

• summarize the audio file
• extract speakers, locations, key topics, and even generate a title from the audio file (if we lack the data)
• create follow-on questions to ask based on the content of the audio file
• enable people to ask questions using the content within the audio file
• generate answers in response to what people ask

The integrated audio experience looks like this:

The inline player starting point is set to where the answer is mostly sourced from. I say "mostly" because a LLM generated answer may pull from multiple points in an audio file to create a response, so we start you in the right vicinity of the topic being discussed. Below the audio player is an indication of who is speaking that also serves as a scrubber to let you move through the file with context. A full, speaker separated transcript follows that's generated by using an automatic speech recognition AI model.

This integrated audio experience follows our general approach of providing content-specific tools within a conversational interface. For both articles and audio files selecting the source card to the right of a generated answer takes you into that deeper experience.

Last but not least, we also added some conversational memory to Ask LukeW. Now most references to previous questions will be understood so you can more naturally continue a conversation.

As before, much thanks to Yangguang Li (front end), Thanh Tran (design), and Sam Pullara (back end) in helping this exploration move forward.

Designers that copy how most mobile apps onboard new users will end up with intro screens, tutorials, and more in their app's first time experience. This two and a half minute clip from my Mind the Gap presentation argues that instead, designers should focus on getting users to their app's core value as soon as possible but not sooner.

Transcript

Once again... a splash screen, a few permission dialogues, and a tutorial, which is often justified by saying, everybody's doing it. But what does that mean?

Those of you that have worked at a software design company know it's pretty common to kick things off with what's known as a competitive analysis. That is, you look at what other sites or apps are doing for a specific feature, you print them out, put them on the walls, and compare what you see.

In the case of scooter sharing companies, we can look at the onboarding experiences of Jump, Spin, Ofo, Bird, Lime, and we see across most of them that there's an intro tour explaining the service to people. So the result of this competitive analysis is that intro tours are probably a good idea because everybody else has one, right?

But if you actually take the time to test some of these things, like the music service Vevo did, they looked at how people were using their intro tour through user testing and analytics. They found most people were just skipping through the tutorial without reading any of the copy.

So if they're skipping this, what would happen if they just got rid of the tour? Turns out in a 28-day experiment with over 160,000 participants, the total number of people who got into the app increased. Completing the tutorial didn't affect engagement or retention metrics, and more people actually completed sign-up.

You can see similar principles at work in the evolution of several Google products as well. Google Photos, for instance, used to have an intro tour, an animated tour, and an introduction to its Android app.

Following a series of tests, the team ended up with a much reduced experience. Away went the spinning logo, the get started screen, the animated tour, all which were sources of drop-off.

All that was left was a redesigned version of the turn-on auto backup screen, which was overlaid on top of people's photo galleries. This step was critical to getting the value out of Google Photos. It's a service that backs up and makes your photos re-findable easily. Little in the app works without this step, so the team made it the first and only focus of onboarding.

It's a great illustration of the principle of getting people to product value as fast as possible, but not faster.

That is, ask the user for the minimum amount of information you need to get them the most valuable experience. In the case of Google Photos, that's turning on auto backup.

Read the book, Typographic Firsts

For a limited time, you can get 50% off a selection of quality fonts, including some of our most popular designs. Whether you’re a graphic designer, marketer, or simply someone who loves typography, this is an opportunity you won’t want to miss.

The post 50% off Fonts appeared first on I Love Typography.

With the explosive popularity of Large Language Models, many companies are implementing conversational (chat) user interfaces for a wide range of use cases leading to more UI design explorations like... conversation scaling.

Scaling conversational interfaces adjust the visual weight (through size, color, font, etc.) of previous messages so the current active message gets proper focus. Previous messages are more quickly and easily scanned since they are reduced in size and visual prominence. Here's two recent examples of this pattern.

The Pi (personal AI) user interface resizes messages when someone scrolls through their conversation. This emphasizes the current message/interaction (since it’s bigger) and provides quick access to the rest of the conversation (since it’s smaller).

The Ask LukeW user interface reduces the size of previous messages (using the question and first two lines of each answer) to provide quick access to the rest of the conversation. If someone wants to read a previous message, they can simply click/tap to bring it into focus.

Since the Ask LukeW feature is for product design professionals vs. casual users, it's possible people want to return to information in prior messages more than on Pi. This is also why there's a pin message feature on Ask LukeW to save useful answers.

Read the book, Typographic Firsts

Typography is an essential element in any design, and choosing the right typeface makes all the difference. That’s where Mackay comes in — a powerful transitional serif designed for both screen and print. Mackay is available in six weights, ranging from a delicate thin to a blustering black, with matching italics for each weight. Mackay […]

The post Introducing Mackay: A Powerful Transitional Serif for Screen and Print appeared first on I Love Typography.

Many companies make use of design systems or common component libraries to make it easier for teams to develop consistent design solutions. This two minute clip from my Mind the Gap presentation looks at why pulling a few off-the-shelf design components from a library is not the same thing as creating a good user experience.

Transcript

In an effort to scale the impact of design teams, many companies are investing in design systems or common components to make it easy for teams to apply similar solutions. And it's common for me to hear refrains like, well, the design is like that because I was just following the guidelines.

But pulling a few off-the-shelf design components from a library is not the same thing as creating a good user experience.

For example, Jet Radar, a flight search engine, makes use of material design guidelines in their product. They've used material design input fields in the design of their form and material design floating action buttons for their primary call to action. But you don't have to be a UX expert to see that the end result is not particularly great.

Labels and input text is duplicated. What looks like inputs are actually hint text. What looks like hint text is actually labels. Comments are scattered across the page. And the primary action, frankly, just looks like a bug.

Jet Radar's most recent design is much more approachable to people, though I could quibble with some of what they do. The point is, simply applying a style guide or design components doesn't ensure your product design works well. In fact, it could have the opposite effect.

Now in fairness, material design actually has updated both of the guidelines I showed earlier to try and cover cases like this. Always be learning. But the point still stands.

There's more to making a holistic user experience than applying guidelines to mockups. And while design systems have great aims, they can quickly become another reason for applying a specific solution for the sake of consistency.

As we just saw, just because something's consistent doesn't necessarily mean it's good.

Over twenty years ago (ouch), I outlined how and why visual hierarchy should be used to make the purpose and function of user interfaces clear. Since then, I'm pretty sure most of the feedback I've given on UI design has included visual hierarchy questions. Why?

Each and every screen in a Web site or app needs to make its purpose clear to a user: what can they do and how can they do it? Without visual hierarchy, this becomes very difficult. Image a screen where every bit of content and every action looks the same. It would be impossible to tell the difference between things and thereby very difficult to use.

Of course, the situation is more subtle in most UI designs. Designers make buttons look like buttons and headlines look like headlines. But the overall balance between all these elements often lacks intention. That is, the visual hierarchy doesn't reflect the purpose and function as emphatically as it should.

To illustrate with an example, here's a sequence of design iterations for the PatientsLikeMe home page from 2006. Yes, I'm dating myself again but this design aesthetic probably requires some caveating.

The iteration above doesn't have enough visual hierarchy. Everything is at a similar level of visual weight so it all kind of blends together. This happens because our eyes end up bouncing between all the visually equal elements. They aren't being intentionally guided through a narrative, a prioritization, or a hierarchy.

In the revision above, things are more visually organized. We're using visual elements like background colors, repeating shapes and fonts styles to outline the major sections of the page. This allows our eyes to take in the higher level sections first, then dig into details when they're relevant.

Here we've added even more visual contrast between the elements on the page. This once again helps guide our eyes. We're using the visual priority of the page elements to help walk people through what this site is for and how they can get started using it.

So how can you tell when there's the right amount of visual hierarchy in a UI design? Just squint. This will blur the design just enough to quickly identify if the important elements stand out. I call this the squint test.

But which elements are the important ones? I love this question because it turns visual hierarchy discussions into strategic ones. To know the answer, you need to understand what product you are making, for whom, and why. With this knowledge, what's important is clear and a good product design is just a mater of reflecting it through visual hierarchy.

Most companies use A/B tests to help them make product decision decisions. This three minute clip from my Mind the Gap presentation looks at why the cumulative results of these kinds of tests often don't add up to more significant impact.

Transcript

In this sign-up flow, we can see there's a promo to try their subscription service. However, looking at the design, there doesn't seem to be any way not to take them up on their offer. Tapping "try it free" goes to two paid plan options.

But it turns out if you tap the little arrow in the upper left, you get taken to a map where you can unlock a bike and ride without the subscription plan. Not very clear in design.

I have no insider information, but I suspect this was a pretty well performing A-B test. Lots of people hit that try it free button.

You've probably heard a lot of people talk about the importance of A-B testing and the impact they can have on conversion. But once again we need to think about what are we measuring.

The classic A-B testing example is changing the color of a button and seeing results. In this example, 9% more clicks. When test results come back showing one item outperformed the other for a specific metric, it's pretty natural to want to implement that. So we make a product design choice because the data made us do it.

Isn't this how we improve user experiences by testing and seeing how user behavior improves? Yes, but it matters how you define and measure improves. Many companies have results that look like the button color example. In isolation, they show great short-term gains. But when you look at the long-term impact, the numbers tell a different story.

Multiple successful A-B tests you'd think would give you cumulative results much larger than what most companies end up seeing.

One of the most common reasons behind this is that we're not using tests with enough contrast. Looking at the impact of a button color change is a pretty low contrast comparison. A more significant contrast would be to change the action altogether, to do something like promoting a native payment solution by default on specific platforms.

The reason the button change is a low contrast change is it doesn't really impact what happens after someone clicks on it. They still go into the same checkout flow, the same forms.

The payment method change is higher contrast because it can completely alter the buying flow. In this case, shifting it from a multi-step form-based process to a single double tap with biometric authentication. So one way of making good use of testing is to try bigger, bolder ideas, ones that have higher risk-reward ratios.

The other way of using testing is basic good hygiene in product launches, using experiments to check outcomes when making changes, adding new features, and even fixing bugs. This gives you a way to measurably vet any updates and avoid causing problems by monitoring and being able to turn off new changes.

In his AI Speaker Series presentation at Sutter Hill Ventures, Geoffrey Litt discussed his work on personal computation mediums and the impact of generative AI on them. Here's my notes from his talk:

• Alan Kay realized everyone would have their own computers and said: "We now want to edit our tools as we have previously edited our documents." But how can we actually make this vision real?
• When it comes to computers and software, we were promised a bicycle for the mind. We got aircraft carriers instead. Bike are personal, modifiable, light. Aircraft carriers are industrial, heavy, and manufactured.
• So how do we make software that is more personal and dynamic? how can our software be more like a bicycle? and how can AI help influence this?

Personal Dynamic Mediums

• When someone sends you a spreadsheet, you don't just get the numbers, you also get little programs you can modify. There's editable bits of computation within.
• Some additional examples of this idea: Webstrates allows you to edit a document in different editors and even edit the editors. Inkbase turns sketches into computational elements. Wildcard images every website was built with a spreadsheet that you can edit.
• Dynamic software is software that is modifiable by the user at run time. Not just what the developer intended.
• Potluck is an experiment in applying this idea to a note taking app for things like recipes: How do people save recipes? Usually in a notes app or dedicated recipe apps.
• Text-based notes are flexible, but static. They're more like a bicycle.
• Specialized apps are dynamic but rigid. Usually they are fixed to a domain, have a fixed feature set, and use rigid schemas to get data into right the right formats. These aircraft carrier apps are too much for what most people need.
• Potluck uses a concept called gradual enrichment to try and give you best of both worlds. It uses extensible searches that allow you to decide what data you want to pull out that has meaning out of that text so that the computer can understand it.
• Potluck then basically pulls that data into a spreadsheet so you can write little spreadsheet formulas and compute with it.
• The last step is dynamic annotations where the app takes whatever you've computed in that spreadsheet and it's put it back in the text file.
• Potluck highlights what elements can be turned into computational elements. Numbers become sliders to edit quantities, times become timers for cooking, etc.
• This illustrates how to think about designing tools that are end user modifiable.
• These kinds of tools can be reused across different domains, support multiple tools per medium, and allow people to make use of personal micro-syntaxes (when people decide on formats that make sense to them) because text is both an input and output in the UI.

AI Opportunities

• People who are not programmers however, really struggle to get going with tools like Potluck. Programmers tend to do pretty well because they are familiar with this kind of thinking. They do it every day.
• Can we use large language models to plug that gap a bit?
• This doesn't mean adding chatbots to the tool. Chatbots are often not the best UI. For example, to clip a video, a set of sliders with visual feedback is much better than using text to do a similar action through text. GUIs and direct manipulation have their advantages.
• A bicycle is a tool that amplifies what you can do and provides you fine control. A chauffeur is more like an assistant that automates a task for you but to do so, you have to give up some control.
• When you want tool feel, it's very important not to get a assistant feel.
• But with fixed applications, you can get things done faster/better but are limited by what the developer decided you can do when building the app. So if you need a new feature, you have to go to the developer. That's a long and costly loop.
• What if you could ship the feature you need to modify your app as you need it?
• In all computational media, you ultimately need to have code that is written to perform functions. Someone needs to write the capabilities. An LLM can help you write these computational elements.
• You could have written the formula but the UI is helping you to get things done. After working with it for a while, maybe you don't need it anymore cause you learned how to do it.
• How do you know what the AI did? You can get written explanation from AI on how it implemented the feature.
• This way of thinking about collaborating with AI really empowers the user, puts them in the driver's seat. They can add capabilities and also learn how.
• Intent specification is iterative. Assume it won't be right on the first try. Iteration enables a higher ceiling, which is basic agile development.
• Of course, there's more to figure out like: how do you design the iteration loop? what is the back and forth process to improve results driven by feedback?
• But the possibilities of combining personal computation mediums with AI are exciting.

Spending the time to get the right metrics affects so many things down the line. This one and a half minute clip from my Mind the Gap presentation shows why and outlines a way to align on the right metrics to track.

Transcript

Let's say we decide to measure app downloads. Well, we start with a small promo, and then we test out another one. Oh, conversions on it are better. Well, we better keep both of them.

Then we add another promo, and installs went up again. So why not drop in more Ooh, and things get even better when we make them bigger. Pretty soon, you've become what you measure, a giant app install ad.

So please, spend the time working through what metrics to measure and why. Real quick, how to choose metrics.

First, we need to decide what change we actually want to see happen in the world. Next, we have to figure out how could we possibly measure that change. For each of these possibilities, write down what you think is going to happen if you start measuring it. What behaviors will you change? What actions will you take?

Next, rank that list by where you see the clearest impact. Then start actually tracking data for your top few, and see if it actually delivers the outcomes you thought it would. When you find a few that actually work for you, make sure to regularly and visibly track