Smashing Magazine - #448: AI Interfaces

Design patterns for AI interfaces, EU AI Act, generative search UX, AI and design systems. Issue #448 Mar 19, 2024 View in the browser

Smashing Newsletter

Ahoy Smashing Friends,

It was April 29, 2005 when Apple released the fifth and latest iteration of macOS. This was before macOS was even macOS. No, no, it was Mac OS X Tiger and it retailed for the handsome sum of $129.95. (This was even before the realization that evergreen OS releases at no cost were a faster path to consumers churning through devices.) Free updates wouldn’t come until Mac OS X Mavericks, the system’s tenth major release.

Mac OS Tiger was the first of its kind in a few ways. For example, it was the first Mac OS to come packaged as a DVD instead of a CD (which could be requested instead for an added $9.95). As far as tech goes, though, Tiger was the first version to officially offer VoiceOver, a new accessibility feature announcing content to users who had difficulty reading off a screen. (Mac OS 10.3 Panther sported a preview copy under the name “Spoken Interface Preview”.)

Fast forward with me. It’s March 2024 and OpenAI unveils its latest feature for ChatGPT, its AI-based app that responds to user queries in a conversational format designed to replicate human interactions. ChatGPT gained the ability to read its text aloud to the user in a computer generated voice, not totally unlike Siri or Alexa… or VoiceOver. We got a hint of it in September 2023 when two-way conversation made its debut, but the March release combines it with text generation for the “best” of both worlds.

There are truly impressive things about ChatGPT’s Read Aloud feature: multilingual support, rewind/skip, and whatnot. But it also feels a lot like a solution to a made-up problem. We already have plenty of assistive technologies that are capable of reading text out loud. Not to mention, they are freely available and often bundled right in the OS, a là VoiceOver.

This dovetails nicely with Jeffrey Zeldman’s “Where the people are”. In it, Zeldman reflects on a client project that called for a social networking feature. He could choose to build it out or leverage Facebook’s existing capabilities, preferring the former to the latter because it could offer users convenience and a more branded experience. His humility, however, pushed him toward the latter because Facebook is where the people already were.

Is it impressive that ChatGPT can read things aloud? Yes, but is that where the people already are? There’s always two sides to a coin. At what point, though, is this a “damn the torpedos” act of development for development’s sake? Where’s the human factor in the process of re-engineering human interactions? Perhaps humility is the missing piece?

On another note, the Smashing team is working hard on new online workshops. In fact, Vitaly will be running one in July on “Designing For Complex UIs” where he’ll dive into ways to design better AI experiences for customers, while respecting digital sustainability and inclusive design at the same time. We also have SmashingConfs taking place in Freiburg, New York, and Antwerp later this year!

SmashingConf Antwerp
Join us at SmashingConf Antwerp along with our fantastic line-up of speakers who’ll be attending morning runs, waffle walks and an unforgettable Smashing Party. Read what last year was like.

We also have friendly bundles for great teams, so perhaps get your incredible team together — for a friendly, inclusive, and memorable experience this year. We can’t wait to see you!

— Geoff Graham


1. AI Interaction Patterns

AI is here to stay. So, how are designers responding to it? When Emily Campbell started consulting teams on AI and product strategy, she noticed how inconsistent the existing experiences already are. Companies are prioritizing “doing AI” but struggling to gracefully integrate it into their current products, so her observation. To help designers make AI feel familiar and straightforward for users, Emily created The Shape of AI.

The Shape of AI

The Shape of AI is a growing collection of AI interaction patterns that rely on proven human interaction and cognition frameworks. They cover everything from identifiers for distinguishing AI content to different ways of entering prompts and trust indicators for controlling the response and assessing its accuracy.

Another interaction pattern library that helps designers tackle common AI challenges comes from the team at Orium. Smarter Patterns considers the form and function of the patterns as well as the ethical challenges that artificial intelligence poses. The focus lies on fostering transparency, trust, autonomy, fairness, and inclusiveness. Two wonderful resources to help us get our products fit for AI while putting the needs of people and community first. (cm)


2. AI Under The Hood

There’s a lot of noise around language models like ChatGPT and their impact, but not enough clear-heading guidance about how to think about them or work with them. Maggie Appleton wants to change that. At SmashingConf Freiburg last year, she held a brilliant talk on the challenges of designing with language models. The video and transcript from the talk are available online. (Psst. Maggie will be live on stage at SmashingConf Antwerp this year, too!)

Squish Meets Structure

In “Squish Meets Structure: Designing with Language Models,” Maggie explores what language models are, how they came into existence, and why they are hard to design with. Maggie compares them to squishy, biological things that work in a completely different way to predictable software and the traditional programming logic we all are used to. The talk is a fantastic opportunity to reconsider existing mental models to better understand the behavior of AI and how to constrain it. (cm)


3. EU AI Act Cheat Sheet

Proposed by the European Union, the AI Act is the first comprehensive law on AI by a major regulator anywhere. It aims to regulate the use of AI, imposing extensive requirements on the development, deployment, and use of high-risk and general-purpose AI applications. The act is still in negotiation, but once effective, it will apply to organizations worldwide.

EU AI Act Cheat Sheet

To give you a better idea of the scope of the AI Act, Oliver Patel published a handy cheat sheet that gets you familiar with the key elements of the act in just a minute. It will be updated once the full legislation text is published. As organizations have approximately 1–2 years to prepare to be compliant, the cheat sheet is a great opportunity to better assess the implications of the AI Act on your business already today. (cm)


From our sponsor

Stop Coding Forms With Fully-Integrated Drag-and-Drop Form Builder

SurveyJS
SurveyJS is a product suite of open-source JavaScript client-side components designed to simplify the creation of a full-cycle form management system fully integrated in your IT infrastructure.

The libraries utilize JSON objects for form metadata and results, and seamlessly integrate with any backend system. The JSON form builder component offers a user-friendly drag-and-drop interface, GUI for form branching, and an integrated CSS theme editor for customizing form design. Check out its free full-featured demo to explore its capabilities firsthand.


4. Why Chatbots Aren’t The Future

Entering a prompt in a text box. That’s what AI tools mostly look like these days. But is this the future of interfaces? No, argues Amelia Wattenberger. In her post “Why Chatbots Are Not The Future,” she explores the problems of chat-based interfaces and where she sees the future of AI instead.

The usability problem with prompt-driven AI

According to Amelia, the real game-changers have very little to do with plain content generation and blindly improving efficiency as we know it from popular AI tools today. Instead, she sees the real value of AI in embracing our humanity and building tools that help us gain clarity in our thinking.

Tom Cleary is also skeptical about prompt-driven AI, particularly seen from a usability perspective. He wrote a great blog post in which he examines what he calls the “prompting gap.” It lies in the fact that generative AI relies on users telling the machine what they want to achieve, although they often don’t know what they are looking for or don’t have the literary skills to be able to articulate it through prompts. A thought-provoking read. (cm)


5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:


6. AI And Design Systems

Which opportunities do AI tools offer for design systems? Brad Frost and the team at Big Medium are finding that AI tools can help supercharge design system efforts across many categories, assisting in various aspects of creation and consumption. In his blog post “AI and Design Systems,” Brad demonstrates possible use cases.

AI and Design Systems

As Brad shows, AI can be useful for writing component code — he compares it to a junior developer contributing code for review. AI tools also come in handy when migrating between tech stacks to save you time and reduce errors. By running unit tests and accessibility reviews, AI can help with testing and QA as developers focus on shipping the project. And AI can also take care of one of the most unpleasant tasks around design systems: documentation.

To ensure AI enhances a team’s work and doesn’t replace their jobs, Brad advocates for a human-centric mindset and a healthy level of skepticism when using the new technology. The guiding principles and considerations he shares in the post are a good starting point if you plan to incorporate AI tools into your workflow. (cm)


7. How To Integrate AI In Design

AI offers promising possibilities, yet we are still at the very beginning of learning how to integrate it into a design in a meaningful way. So how do other organizations make use of the new opportunities? What’s their vision for enhancing their products with AI? The customer insights hub Dovetail shares a look inside their AI vision and the AI-powered features they are working on.

Our vision for AI in Dovetail

The focus of Dovetail’s AI vision lies on speed, accuracy, and discovery to enable users to gain the customer insights they need more quickly. Great potential of using AI also lies in reducing bias when analyzing insights and protecting customers’ privacy when sharing their data with stakeholders. A good example of what a roadmap for using AI in a way that supports its users and complements and augments the way they work can look like. (cm)


8. Generative Search

Imagine you plan to purchase a new chair for your home office. How do you decide which one to get? You’ll probably start googling something like “ergonomic office chair,” and then you go down the rabbit hole, combing through product descriptions, reviews, and comments to make your decision. The days of doing search like this might soon be over, though, as Google is experimenting with a Generative Search Experience.

Generative search experience: the next step in search engine UX?

Instead of just returning links, Google’s Generative Search Experience uses AI to generate an organized presentation of the subject, with a brief summary, bullet-pointed lists, and several jumping-off points to do more digging.

Daley Wilhelm wrote a great post in which she dives deeper into the Generative Search Experience, how it could change the user journey, and what this means for sites that generate income from ads. An interesting outlook at where things might be heading with AI — and a good reminder to do your own research from reputable sources before you make a decision on what to buy, where to have dinner, or who to vote for. (cm)


9. News From The Smashing Library 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Success At Scale
Also meet our newest Smashing Book: Success At Scale. Shipping now. Get the book or browse the complete library.


10. Recent Smashing Articles


That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#447: Web Performance

Tuesday, March 12, 2024

Interaction To Next Paint, web font analyzer, web performance course, and Tailwind vs. Semantic CSS. Issue #447 • Mar 12, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends,

#446: Onboarding UX Playbook

Tuesday, March 5, 2024

Choosing onboarding methods (Figma kit), guidelines, best practices, ways of working and how to onboard users on mobile devices. Issue #446 • Mar 5, 2024 • View in the browser Smashing Newsletter Bună

#445: Web Accessibility

Tuesday, February 27, 2024

WCAG 2.2, colorblindness, accessibility research, accessible numbers, design systems and designing for mental health. Issue #445 • Feb 27, 2024 • View in the browser Smashing Newsletter Konbanwa

#444: UX Writing

Tuesday, February 20, 2024

Voice and tone, content design process, plain language guidelines and UX writing in design systems. Issue #444 • Feb 20, 2024 • View in the browser Smashing Newsletter Howdy Smashing Friends, Words

#443: UX Research

Tuesday, February 13, 2024

A complete guide to user interviews, UX research launch pad and how to build up UX research from scratch. Issue #443 • Feb 13, 2024 • View in the browser 💨 Smashing Newsletter Tere õhtust Smashing

You Might Also Like

Writing a POV Doc

Sunday, May 5, 2024

Issue 193: Share what you care about at scale ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

It's Officially Show House Season

Thursday, May 2, 2024

View in your browser | Update your preferences ADPro Showing Up, and Showing Off One of the traditions design aficionados look forward to the most each year is the return of decorator show houses. In

Zelman Meats, AI Feedback Loop, Figma Variables, CSS Masonry, Passkeys

Thursday, May 2, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 2 2024 Zelman Meats logo by Red Dot Studio logodesignlove.

Every viral brand has these 5 things in common ⚡️

Wednesday, May 1, 2024

See if your brand checks all the boxes... Branding, branding, branding. Like, PR, it's an oft-misunderstood area of business building. Many people think a logo, some colors, and a font constitute

inherit(), Polish, Picture-Superiority Effect, Music Notation, Multi-Brand Design System

Wednesday, May 1, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 1 2024 Self-Modifying Variables: the inherit() Workaround

164 / What if you could talk to Scarlett Johansson from the movie Her?

Tuesday, April 30, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 2 View in browser Welcome to Issue 164! Standing out in today's competitive market is hard, really hard. But side projects can help

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

Mayer Rus on L.A.’s Great Gallery Migration

Tuesday, April 30, 2024

View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party For this week's edition

Head of Typography, Centering Things, 3D Badge, Alternating Style Queries, Hate Speech

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 30 2024 Detect JavaScript Support in CSS ryanmulligan.dev

JavaScript Support, AI in UI/UX, Deja Vu, Nature of Code, Clubhouse

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 29 2024 Detect JavaScript Support in CSS ryanmulligan.dev