Summary: Nagging UI reminders become a dark design pattern | Typeface manga | Little tech vs Big tech | The number of fields on web forms | Conference on “Teaching in the Age of AI” | Pixel peeping on Midjourney image quality | Major upgrade to the Grok LLM
UX Roundup for August 19, 2024. (Ideogram)
Nagging UI Reminders Quickly Become a Dark Design Pattern
Patricia Reiners posted a detailed analysis of the negative impact on UX from Instagram’s repeated nudges to turn on notifications about new posts. In fact, if you care about your productivity and even your mental health, you are advised to turn off almost all notifications on your phone and computer. Even a small interruption breaks the flow of engagement in your work or other more important activity: even a one-minute pause usually costs you 10–15 minutes of lost work as you need to reestablish the context and reload content into short-term memory. You should only open social media (like Instagram) when you decide that you need a break.
As Reiners points out, we know why Instagram wants you to take its notifications: you are likely to spend more time on the service this way and it will become more sticky, leading to less churn. For the company, these business advantages apparently outweigh the negative impact on their users of notifications.
However, I’ll accept the existence of a notification feature as long as users can easily turn it on or off. The point here is not the notifications themselves, but rather the pop-up message that Instagram repeatedly shows, urging the user to turn notifications back on, even though that user has deliberately deactivated the notifications.
You must accept user preferences, even if those preferences are not optimal for your business.
This is an interesting example that shows the impact of user experience happening over time and being cumulative. (It’s easy to think about a user interface as designing each screen or dialog box as a static element, but in fact, many UI elements are shown repeatedly to users, and the experience is the sum of these interactions.) Showing a reminder of the notification feature once is probably good usability, as long as the user isn’t bombarded with notifications about many other features at the same time. But repeatedly showing that exact same reminder is the dark design pattern called “nagging” and quickly becomes extremely annoying.
A nagging computer is not just annoying; the insistent nagging is a dark design pattern. (Ideogram)
Typeface Manga
A fun way to learn a bit about typography: What the Font?! — A Manga Guide to Western Typeface by Kuniichi Ashiya. Yes, it does what it says on the tin: it’s a manga (Japanese comic book), but translated into English.
(Hat tip to Srikant Chari for alerting me to this manga.)
Learn typography the entertaining way: read manga. (This image was made with Ideogram: it’s not from the comic book, which I’m not showing you for copyright reasons. Since it’s a comic book, I don’t believe that reproducing Kuniichi Ashiya’s drawings would be appropriate fair use.)
Protecting Little Tech Against Big Tech Regulatory Capture
Nice essay by Marc Andreessen and Ben Horowitz (the founders of A16Z) about the need to defend what they call “little tech” against the legacy “Big Tech” companies. This has probably always been true, but it has been brought to the forefront by AI, where we will only realize the full potential for uplifting humanity if thousands of new companies can explore this immense fertile ground where nobody knows the best approaches yet. Progress will be stifled if we’re left with only a few big AI companies.
Unfortunately, big companies have the government's ear and have been waging a fierce campaign to institute strict regulations on AI at a premature stage when we have no idea where AI can take us. The doomers and decels raise fears about potential problems that are not real. To the extent that they are real — for example, deepfakes — the proper approach is to regulate such uses to the extent that they are not already illegal.
In most countries, it’s surely already illegal to make naughty pictures of somebody without their consent. If there’s no such law in some countries, make a law against this offensive conduct. Don’t outlaw technology that has so many beneficial uses. As an analogy, we don’t outlaw knives above a certain sharpness, or there would be no sushi. We outlaw killing people, whether with a knife or any other implement.
Should sharp knives be illegal? Not if you want good sushi. But stabbing people should be illegal. Regulate the use cases, not the tools, because heavy regulations benefit big companies with legions of lawyers. (Midjourney)
Minimize the Number of Fields on Web Forms
The Baymard Institute has published an analysis of checkout forms on ecommerce forms and the results of usability testing of shoppers trying to check out. As a reminder, Baymard is the world’s leading authority on ecommerce usability and has conducted more usability research than anybody else on this topic.
(With the possible exception of Amazon.com, but they aren’t talking. In contrast, you can buy very voluminous reports with detailed usability guidelines about all aspects of ecommerce from Baymard. While expensive — $1,188 or $2,388, depending on how much you want — the cost of this research is nothing compared with the cost of conducting your own competitive research, even on a much smaller number of sites. Any ecommerce site that gains even one new insight from this broad-scale research will recover the cost immediately from increased sales.)
If you’re not an ecommerce site, the report price is too rich. But you can still benefit from a core insight into the usability of web forms because the general conclusion remains the same whether the form is used for checkout or for some other purpose.
Baymard’s new research shows two things, one of which we already knew, but which can’t be emphasized enough:
Fewer form fields are better. (This finding has been held for several decades, but I mention it here again because so many websites violate it.) The average ecommerce checkout flow in 2024 contained 11.3 form fields, and 22% of users in Baymard’s research have abandoned a purchase due to checkout complexity. This is down by slightly more than one field since 2019 — the average number of form fields has been dropping by 0.28 per year over this period. Better, not good enough. The Baymard article (linked above) has a nice chart showing checkout performance dropping precariously as the number of fields increases from 8 to 18.
The number of form fields matters more than the number of form steps. This is the newer and possibly more controversial finding, because there's been much discussion over the decades about the benefits and drawbacks of splitting a long form across multiple pages. The reason is that the usability problem with long forms is caused by the effort they impose on users, and the effort of scrolling down a long form is about the same as the effort of clicking through the pages of a multi-screen form. The difference in user effort caused by single-page vs. multipage forms is minuscule compared with the difference in effort imposed by many additional fields that must be considered, understood, and possibly completed (with the associated risk of errors).
Overwhelmed by web forms? The main usability problem comes from the sheer number of form fields the user has to consider and complete. Splitting the form across multiple pages doesn’t help. (Leonardo)
The main guideline for form design remains the same as always: only ask a question (with the associated form field for the response) if you really need the answer. Any extra form field equals lost sales for an ecommerce site and lower usability for a non-ecommerce site.
Baymard provides several guidelines for reducing the number of fields. Here are the top 3:
Use a single “Name” field. Don’t show separate fields for first name, middle initial, and last name. Besides reducing errors and increasing sales, a single name field also improves international usability by avoiding any confusion as to whether the family name comes first (as in many Asian cultures) or last (as in Europe).
Hide “Address 2” fields unless the user requests it. Some addresses require an additional line beyond the traditional street name and house number. It’s good to allow an additional line for these destinations, but this field can be hidden by default and only shown to those users who request it. People who live in a place that needs multiple address lines will know this and it’s a very small bother for them to click for “add an address line (optional).”
Hide coupon code fields. These are a special bugaboo of mine, so I’m happy that Baymard included this among their top guidelines. First, users who click through from a promotional email should have the discount applied automatically without having to enter a coupon. Second, when general users see a coupon code field, this immediately signals to them that they are overpaying if they don’t have the coupon code. Countless sales have been lost for this reason. (Similar to the situation for “Address 2,” the form should include a small link to open up a coupon code field. Rest assured that users who do have a coupon will be looking for where to enter it, so they’ll spot this link if it’s at least decently designed.)
Put your web forms on a virtual shooting range and hunt down any field you can eliminate, combine, or hide for most users. Look closely through that spotting scope and remember that any extra field costs you business. (Midjourney)
Conference on “Teaching in the Age of AI”
Conference on Teaching in the Age of AI, October 25, 2025, Gainesville, Florida. Despite the general title, it seems that the conference will mostly focus on how to teach writing in the age of AI, not other topics (e.g., teaching how to use AI, teaching other topics with AI assistance). That said, writing is a hugely important topic and the craft of writing (whether UX writing, creative writing, journalistic writing, or any other sort) is changing dramatically with AI. When the way people do their jobs after graduation changes, the way students should be taught before graduation should change as well. Thus, if you’re a writing instructor, consider this event.
Conference on AI in the classroom. (Midjourney)
Midjourney 6.0 vs. 6.1 Image Quality
Drew Brucker published an interesting, detailed comparison of image quality from Midjourney 6.0 and 6.1, focusing on photography concepts such as texture, detail, clarity, sharpness, and contrast. He concludes that Midjourney improved image quality on all 5 parameters.
This analysis reminds me of reading reviews of digital cameras back in the days when “real” cameras produced much better photos than cellphones, and major manufacturers like Canon, Panasonic, and Sony introduced new models each year. Camera enthusiasts engaged in pixel peeping where they enlarged photos from different cameras to be so big that one could see the individual pixels. At that level of magnification, supposed differences in image quality were often visible even though there was no discernable difference between the photos when viewed at normal size.
I don’t doubt that Midjourney improved various IQ parameters, especially for photorealistic images. However, these pixel-level improvements are less important to me. First, I personally prefer non-photorealistic images which I find to be much more interesting to create with an AI tool. Second, whatever the style preferences of any individual creator, the more important point is how well the AI models the desired scene.
This is a major difference between camera reviews and AI image-generation reviews. When choosing a camera, presumably, the photographer remains the same, as does his or her choice and framing of the subject for the photo. The differentiation assessed in a review is how well the camera lens and sensor capture the photographer’s chosen subject. For AI images, differentiation stems from the tool’s interpretation of the prompt, including issues like the framing of the scene (or even the details of the scene), as shown by the following example.
In this example, a review of a new Sony camera would focus on how well the cherry blossoms were rendered, not on the photographer’s choice of what she wants to photograph. In assessing an AI image tool, the composition of the scene is often a more important issue than the exact IQ. Here, I prompted for an image showing the evaluation of a new Sony camera, but I didn’t specify that the camera reviewer should photograph a flowering tree, nor that she would be in focus whereas her subject would be out of focus. (Midjourney)
Grok 2: New Frontier-Level AI Model
xAI has released version 2 of its LLM, Grok 2. For now, this AI is available to premium subscribers to X, which costs $84 per year, or $7 per month — a good deal cheaper than ChatGPT, Midjourney, and the like, especially since Grok includes both a language model and top-of-the-line image generation (see next news item). According to the AI chatbot arena leaderboard, Grok 2 is one of the best AI models, scoring a little lower than the August 8 model of ChatGPT 4o and about the same as Claude, Llama, and Google.
I gave Grok 2 the following prompt: Write a one-paragraph description of Jakob Nielsen's usability heuristic number 4, "consistency and standards", and follow this with another paragraph giving one good example of a user interface design that complies with this heuristic and one bad example of a user interface design that violates this heuristic. Here’s what Grok had to say:
[Grok 2:] Jakob Nielsen's Usability Heuristic 4: Consistency and Standards - This principle advocates for a uniform and predictable user interface, where elements like buttons, menus, and interactions follow a consistent pattern both within the application and with industry norms. This not only helps users to learn the system more quickly but also reduces the likelihood of errors by making the system's behavior more predictable.
Good Example: Google's Material Design is an excellent embodiment of this heuristic. Across Google's suite of applications like Gmail, Google Drive, and Google Calendar, there's a consistent use of icons, color schemes, and navigation patterns. For instance, the hamburger menu for navigation, the three-dot menu for more options, and the back arrow are universally recognized and used in the same way across these apps, providing a seamless user experience.
Bad Example: Consider a website where the login process varies unpredictably. On one page, you might log in using a form at the top right corner, but on another, you need to click on your profile picture at the bottom left, and on yet another, there's a 'Login' button hidden in a dropdown menu under 'Settings'. This lack of consistency would lead to user confusion, increased cognitive load, and a higher likelihood of users failing to log in or abandoning the site due to frustration.
I don’t think the bad example is particularly interesting, but it does illustrate the heuristic. In the hope of getting a better bad example, I fed the same prompt to Claude. I think its example is marginally better, in that these design choices are more likely to be found together in real applications.
[Claude 3.5 Sonnet:] A poor example that violates this heuristic would be a mobile app that uses different icons or labels for the same function across different screens. For instance, if the "back" function is represented by an arrow icon on one screen, a text label on another, and a completely different icon on a third screen, it would confuse users and make the app harder to navigate, thus violating the consistency and standards principle.
For now, my main disappointment with Grok is that it supposedly has a “fun” mode that you can switch on and off, but I don’t find the fun answers useful. I would have liked a more humorous description (but still educational) discussion of my heuristic, but I didn’t get that.
Image generated with Grok for the prompt “Jakob Nielsen high-fiving Elon Musk” to congratulate him on the huge improvement from Grok 1 (basically useless) to Grok 2 (almost as good as ChatGPT and less than half the price). Even though the photorealism is good, I’ll have to say that the “Jakob” character only vaguely looks like me (has more hair, for one). Musk is much taller than me in real life, and I also don’t think the gesture qualifies as true high-fiving. Grok got my big nose right, though.
Flux on Grok
It’s hard to write a newsletter that includes AI coverage, given this space's frantic pace. Last week I covered the new Flux image model that some people think is a Midjourney-killer. (I don’t.) I mentioned that the best place to use Flux was probably Freepik. Literally, the day after I mailed out that newsletter, Grok 2 launched (see previous news item), and Grok now includes Flux as its image model.
I still think that Freepik offers a better UX for using Flux, but Freepik is 50% more expensive than Grok, so if you’re on a budget, Grok’s the way. (Freepik offers more image tools in return for the higher subscription fee, but X provides both an image model and a language model to its premium subscribers plus some benefits if using the X social media service itself. Depends on your needs what’s the better choice. If you’re rich enough to afford $12/month for image generation, I currently recommend Freepik — and I repeat that it’s not free, despite its name. You need a premium subscription for any serious use.)
Freepik also offers the Flux “Realism” LoRA that was used to generate the “photo” of a conference speaker that went viral for being so good that it took serious pixel peeping to discern that it was not real. (LoRA or Low-Rank Adaptation is a fine-tuning technique for large AI models that reduces the number of trainable parameters. LoRA is particularly useful for customizing a pre-trained model for specific tasks or domains.)
One major benefit of using Flux on Grok is that Grok is committed to more creative freedom with less censorship than the other AI services. For example, it gladly made the image in the previous story, despite including a deepfake of a celebrity. (I am strongly against deceptive deepfaking, but in this case, I figured that Musk wouldn’t mind being congratulated on his improved product, plus I’m very clear that the illustration is not a real photo.) I mainly think that responsible use of AI-generated images should be vested with the human author who publishes such images, though I would like an invisible watermark to distinguish AI-generated images.
As another example, Grok immediately gave me the following image of the Viking Erik Bloodaxe. I have had quite some trouble getting Midjourney to draw this notoriously bloodthirsty raider. Midjourney doesn’t have as harsh censorship as OpenAI (and doesn’t falsify history like Google), but it is too squeamish to draw a guy named Bloodaxe without some finagling.
Prompt: “The Viking Erik Bloodaxe leading a raid.” Given his nickname, I’m disappointed that he’s not holding an axe. (Grok)
Grok immediately produced this image when asked to show Erik with his proverbial bloody axe, proving that it is indeed censorship-free. (Sadly, it gave him an anachronistic helmet: contrary to stereotypes, the Vikings didn’t wear horned helmets, which were used in Denmark about 1,800 years earlier.)