# interaction Published articles for interaction. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## 10 UI fixes I shipped in 10 days DevFeed: [10 UI fixes I shipped in 10 days]() Original publisher: [Read original article]() Author: Dmytro Tovstokoryi Published: 2025-12-01T00:00:00Z Content type: article Language: en Sources: [Mintlify Blog]() Topics: [ui](), [User experience (UX)](), [User interface design](), [Accessibility](), [navigation](), [dashboards]() Tags: [accessibility](), [dashboards](), [engineering](), [interaction](), [keyboard](), [layout](), [navigation](), [ui](), [ux]() ### AI overview A Mintlify design engineer describes 10 UI improvements shipped over 10 days, addressing layout shifts, dynamic number widths, dropdown animation origins, input focus behavior, navigation interactions, and keyboard accessibility. ### Source excerpt Little details are what make UX so good you don't notice it. ## Understanding Accessibility Focus and Keyboard Focus in Android Compose DevFeed: [Understanding Accessibility Focus and Keyboard Focus in Android Compose]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2026-04-30T03:53:43.294000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [Compose](), [Android](), [User interface design]() Tags: [accessibility](), [android](), [compose](), [interaction](), [keyboard](), [screen]() ### AI overview This tutorial explains the difference between accessibility focus used by screen readers such as TalkBack and keyboard focus used with keyboards, D-pads, and similar devices in Android Compose. It describes which elements can receive each type of focus and gives guidance on making touch-interactive components focusable. ### Source excerpt I've seen multiple questions in various Slack communities, Stack Overflow, and other places related to focus on Android and how it doesn't behave as expected. The question typically concerns the use of focusRequester and then inquires why Talkback or other assistive technologies fail to set focus correctly. The simple answer is that these APIs are different, and focus behaves differently with accessibility focus and keyboard focus. In this blog post, I'll discuss the differences and what you can do in different cases. Let's first look at what I mean when I talk about accessibility focus and keyboard focus. Accessibility Focus In this blog post, accessibility focus refers to the focus related to screen readers, such as TalkBack. It could include focus for switch access as well, but I'm leaving it out of the scope of this blog post. When using a screen reader, accessibility focus can be set to any element relevant to the user, such as interactive elements, text, images with text alternatives (content descriptions), and other meaningful elements. The focus indicator can look different on different phones, but here's an example from my phone: It's set by the system, so the app developer can't edit it, and there shouldn't be any need to do that either. Keyboard Focus Keyboard focus, on the other hand, is the focus that interactive elements receive when a user uses a keyboard, D-pad, or other keyboard-emulating device for navigation. Only interactive elements should be focusable; never, for example, headings or other text. The default focus indicator is the ripple, so it's not that visible: Later, I will write a blog post about customising and making the focus indicator pass the accessibility legal requirements with color contrast and other requirements. Making a Component Focusable So you're creating a custom component, and wondering if it's the kind that should be focusable. The short and simple answer is that every component that the user can interact with via touch in ## Be Mine and Add Interaction with Compose and Canvas DevFeed: [Be Mine and Add Interaction with Compose and Canvas]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-06-11T04:08:03.778000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Canvas](), [Compose](), [compose-multiplatform](), [SVG](), [Figma]() Tags: [canvas](), [compose](), [creative-coding](), [figma](), [interaction](), [svg]() ### AI overview This tutorial shows how to use Compose and Canvas to draw interactive heart-shaped candies. It explains detecting pointer input gestures so the candies scale larger when touched, and builds on earlier work using SVG path strings with Compose Multiplatform. ### Source excerpt Valentine's Day is approaching, and while I prefer the Finnish version ("Friend's Day"), I was inspired to do some creative coding in the holiday theme. The Hollywood-centric film industry (in addition to globalization in general) has carried those heart-shaped candies to the North as well. While browsing some images for inspiration, I decided to use them for the next piece I'm writing. And that's not all! I also wanted to continue my series of Canvas-related blog posts, so this one walks through another concept with Canvas: How to detect pointer input gestures and add some interaction. So, what are we building today? Here's a video showing some heart-shaped candies with messages and how they scale bigger when I'm touching them: Let's get coding! Drawing the Hearts This project builds on my previous blog post, Using SVGs on Canvas with Compose Multiplatform, which explained how to draw from SVG's path strings to Compose Canvas. I prepared an SVG image on Figma and then extracted the path strings to draw the hearts. We will utilize some functions from the previous blog post: Float.scaleToSize and PathNode.scaleTo. I won't explain them in this blog post; just mention them. If you want a refresher on how they work, head to the blog post describing them. Alright, let's start by drawing one heart on Canvas. Drawing One Heart We want to extract the logic for drawing the heart to a function. Let's call it drawCandyHeart, and pass the top-left offset, the size of the heart, and the color we're drawing the heart with to the function: private fun DrawScope.drawCandyHeart( topLeft: Offset, heartSize: Size, color: Color, ) { } I've defined the path strings in a separate list, but I will leave them out from this blog post for brevity. They're included in the final code, which you can find at the end of the blog post. We can get the path strings with a function pathString(color: Color): Pair, which returns the two path strings with the color with different opacity ## More Accessible Graphs with Jetpack Compose Part 4: On-Screen Control Buttons DevFeed: [More Accessible Graphs with Jetpack Compose Part 4: On-Screen Control Buttons]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-06-11T04:27:25.251000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Jetpack Compose](), [Graphs](), [ui](), [Users](), [screen]() Tags: [accessible](), [component](), [gestures](), [graphs](), [interaction](), [jetpack-compose](), [ui]() ### AI overview This tutorial is the fourth article in a series about making graphs built with Jetpack Compose more accessible. It explains why continuous pointer gestures and keyboard interaction may not work for all users, then adds visible on-screen buttons for moving forward and backward through the graph. ### Source excerpt This blog post is the fourth one in my series on more accessible graphs with Jetpack Compose. You can find the previous three from the following links: More Accessible Graphs with Jetpack Compose Part 1: Adding Content Description More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction More Accessible Graphs with Jetpack Compose Part 3: Differentiating without Color Continuous (or path-based) pointer input, like drag-gesture, might be problematic for some users. For example, if a user has tremors in their hands, the gesture is not always continuous, and if the app relies on this kind of gesture to work, it may be unusable for these users. Now, if you have followed this blog post series, you might wonder - hey, we added keyboard interaction; isn't that enough? No, it's not - it would require a physical keyboard. Many users don't use a physical keyboard, even if they could benefit from it. So, in this blog post, we'll add on-screen controls to the graph. The best part is that this solution also solves the issues with a switch device I mentioned at the end of the blog post about keyboard interaction! Head to the paragraph about Switch Access for more in-depth explanations. Adding Buttons So, one way to solve this problem with path-based gestures is to add visible buttons as an alternative way of navigating inside the graph. In the case of this graph, we want to add two buttons: One for going forward and another for going backward. This is what the UI will look like once we add the controls: We add a new component, called ControlButtons that wraps these buttons: @Composable fun ControlButtons( highlightedX: Float?, lastIndex: Int, setFocus: (Int) -> Unit ) { ... } It takes three parameters: highlightedX, which is the currently highlighted year on the x-axis, lastIndex, which is the last year's index, and a function called setFocus, which takes in an integer - the index where the focus should go next - and returns Unit. This is what it looks like ## My Advice to a Developer New to Accessibility DevFeed: [My Advice to a Developer New to Accessibility]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2023-01-03T08:57:33.125000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [Web Development](), [HTML](), [keyboard](), [markup]() Tags: [accessibility](), [accessible](), [advice](), [developer](), [development](), [element](), [elements](), [focus](), [html](), [html-elements](), [input](), [interaction](), [interactive](), [keyboard](), [learning](), [markup]() ### AI overview This beginner-oriented accessibility article recommends focusing on progress rather than perfection and introduces semantic HTML, keyboard navigation, and listening to people with disabilities. It explains that semantic elements communicate meaning to browsers and developers and support appropriate interaction, while a div styled as a button may work only for mouse users and may not be focusable or keyboard-accessible. ### Source excerpt Learning about accessibility for the first time can feel overwhelming. You start reading, and at some point, it hits you: There is so much to learn! And if you're like me and feel that it's your responsibility to make the things you create accessible, that might even make you feel anxious. And yes, there is a lot to learn regarding accessibility. But you don't need to know everything at once. As Meryl Evans reminds us in her tweet (and a blog post the tweet links to), it's about progress over perfection: https://twitter.com/merylkevans/status/1547635550466674692 So, here are some things I wish I had known when I first started learning accessibility. Heck, I wish I had known these things when I started learning web development! I'll share semantic HTML, keyboard navigation, and listening to people with disabilities. Learn Semantic HTML and Use It So, first thing: Learn semantic HTML. But what does it mean? Semantic HTML, or semantic markup, describes its meaning to the browser and developer in a human- and machine-readable way. So, with semantic elements, a human will know what the HTML element is about, and the browser knows what it should render and how it should behave when a user interacts with it. Here's an example: That button uses a semantic button-element. When it does so, the browser knows what it should do when the user either clicks or activates it with a keyboard or other input device. Here's an example of a non-semantic "button":
I look like a button
So, this "button" made out of div looks like a button and even has the onClick-handler. So, wouldn't a human recognize it as a button? Well, yes and no. It depends on the human. You see, this "button" works only for mouse users. As div is not an interactive element by nature, it doesn't handle interaction the same way as, for example, a button-element. When using a semantic button-element, that onClick-event pro ## Petite-Vue: A 5.8 KB JavaScript Library for Adding Small Interactions to Server-Rendered Pages DevFeed: [Petite-Vue: A 5.8 KB JavaScript Library for Adding Small Interactions to Server-Rendered Pages]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2021-08-20T06:41:00Z Content type: article Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Vue.js](), [JavaScript](), [Library](), [Web Development](), [Front end](), [interactive website]() Tags: [5-8kb](), [bits](), [gives](), [insights](), [interaction](), [javascript](), [library](), [optimized](), [pages](), [petite-vue](), [power](), [slimmed](), [small](), [sprinkling](), [tiny](), [vue](), [vue-js](), [web]() ### AI overview This article introduces Petite-Vue, a 5.8 KB JavaScript micro-framework for progressively enhancing server-rendered HTML with small interactive features. It compares Petite-Vue with Alpine.js and highlights its Vue-compatible API, migration path to Vue.js, existing Vue ecosystem, and TypeScript support. ### Source excerpt Petite-Vue is a tiny 5.8kb JavaScript library that gives you the power of Vue.js, but slimmed down & optimized for sprinkling small bits of interaction on your web pages ## Implementing mouse pointer interactions on iPad DevFeed: [Implementing mouse pointer interactions on iPad]() Original publisher: [Read original article]() Published: 2020-03-24T21:00:00Z Content type: tutorial Language: en Sources: [Rambo Codes]() Topics: [iOS](), [ui](), [coding](), [GUI](), [Xcode](), [keyboard]() Tags: [animations](), [apple](), [coding](), [gui](), [implementing](), [interaction](), [ios](), [ipad](), [keyboard](), [sdk]() ### AI overview A guide to implementing mouse and trackpad pointer interactions on iPadOS 13.4. It covers the relevant APIs, setup requirements, UIHoverGestureRecognizer, and hover animations while noting that iPad pointer behavior differs from macOS. ### Source excerpt Gui Rambo writes about his coding and reverse engineering adventures. ## Multi-column manipulation DevFeed: [Multi-column manipulation]() Original publisher: [Read original article]() Author: Heydon Pickering Published: 2019-07-20T00:00:00Z Content type: tutorial Language: en Sources: [The Every Layout Blog]() Topics: [CSS](), [Web Development](), [modern web development]() Tags: [css](), [developer-tools](), [example](), [interaction](), [layout]() ### AI overview An exploration of CSS Multi-column Layout, focusing on its unusual horizontal or vertical overflow behavior and the interaction challenges of horizontal scrolling. It also demonstrates quantity-dependent columns that split long bullet lists into two columns when they contain at least five items. ### Source excerpt Despite predating both Grid and Flexbox, Multi-column Layout represents--at least to me--an even more radical departure from the way we normally do and think about CSS layout. Dividing just one element into a multi-column representation of its contents feels weird, heretical even. Setting a multi-column context means asking (flow) content to progress, by column, in a horizontal direction. This invokes one of two issues, depending on whether you set a height on the element. With no set height, there's no limit to the height of the columns. This will result in vertical overflow, and the necessity to scroll down and up the page to read each successive column. Many are likely to find this arduous. With a set height, columns are forced to spawn in the inline (horizontal) direction, creating horizontal overflow. Setting overflow: auto frames this correctly. .columns { height: 25vh; /* ↓ columns defined by width */ columns: 30ch; overflow: auto; } However, despite the increasing popularity of scrolling menus and other such patterns harnessing horizontal scrolling, it is still an unconventional interaction paradigm -- and unconventional patterns are liable to be misapprehended by users. There are ways to increase perceived affordance, of course--perhaps by adding some custom styling to the scrollbar (-webkit-scrollbar), or providing some overflow-dependent shadows. But this may not be enough. Quantity-dependent columns One thing I have been experimenting with is the application of multiple columns in response to content quantity. Let's say I have a bullet list, and let's assume each bullet point is likely to be relatively short; no more than a sentence. There's no benefit to dividing the list into columns when there are only a few points. But the overall height of the list is shortened (and the chance of the reader being able to see the whole list without scrolling is increased) when a long list is divided into two. In the following example, the list is split into two columns w ## Presenting BottomSheet DevFeed: [Presenting BottomSheet]() Original publisher: [Read original article]() Author: https://github.com/emilsjolander (Emil Sjölander) Published: 2015-06-04T00:00:00Z Content type: article Language: en Sources: [Flipboard]() Topics: [Android](), [ui](), [Material Design](), [Open Source](), [GitHub]() Tags: [android](), [components](), [filter](), [github](), [interaction](), [material-design](), [open-source](), [sorting]() ### AI overview Flipboard introduces BottomSheet, an open-source Android UI component for presenting views from the bottom of the screen with interactive dismissal and animations. It also releases IntentPickerSheetView, which provides filtering and sorting for activities handling an intent. ### Source excerpt We are happy to introduce BottomSheet a new Open Source Android UI Component! At Flipboard, we love building visually stunning and highly interactive UIs. When building these UIs, we tend to build them as fairly stand alone components. This makes it very easy for our developers to implement a similar interaction model and aesthetic across the whole product while working in parallel. BottomSheet is a UI component we developed to facilitate a new interaction model for saving an article to one of your magazines (otherwise known as "The Flip UI"). The result of our efforts is a design you can now see in the current version of Flipboard. BottomSheet fits perfectly with Google's Material Design aesthetic as well, matching their Bottom Sheet specification. We think this component is great for displaying many types of views, from a simple intent picker to something as complex as the example shown from Flipboard. In its simplest form, BottomSheet can be used to show any view in a sort of modal UI that's presented from the bottom of the screen can be interactively dismissed. At Flipboard, we think it's very important that things feel responsive, and having interactive animations is an important part of this. Apart from providing a component for presenting views in a BottomSheet, we have also have a module for common views developers might like to present in a BottomSheet. The first such component we're releasing is the 1 IntentPickerSheetView. This sheet view is initialized with an intent and will show a grid of activities that can handle the intent. It works very similarly to Android's built in IntentChooser, and looks very similar to the picker used in Lollipop and above. There are a couple of ways in which our implementation improves upon the system intent chooser: It can be interactively dismissed, making it feel much more responsive. It adds an easy-to-use API for filtering and sorting the activities shown. Ever wanted to filter out the Bluetooth activity when adding sha ## Workshop with blindfolded lunch DevFeed: [Workshop with blindfolded lunch]() Original publisher: [Read original article]() Author: Lotte Johansen Published: 2014-11-19T18:00:00Z Content type: article Language: en Sources: [Finn.no]() Topics: [Accessibility](), [User interface design](), [Requirements]() Tags: [accessibility](), [interaction](), [requirements](), [understand](), [user](), [workshop]() ### AI overview FINN describes an accessibility workshop held with the Norwegian Association of the Blind and Partially Sighted. Developers, designers, and product owners learned about accessibility requirements and experienced a blindfolded lunch intended to build understanding of users with visual impairments. ### Source excerpt Workshop with blindfolded lunch in cooperation with The Norwegian Association of the Blind and Partially Sighted (NABP) At FINN a grassroots group of developers and interaction designers launched an initiative to bring up awareness of accessibility. The law of accessibility was introduced July 1st 2014 and m.finn.no is covered by that law because of its major design changes. The Accessibility group in FINN wanted to convey the same message as the NABP; caring for people with disabilities when we build our services, hoping it lead to better user experiences for all. Wednesday November 19th, FINN arranged an accessibility workshop in cooperation with NABP. About 30 developers, designers and product owners attended the keynote by Stein Erik Skotkjerra who is blind and by Kristoffer Lium who is partially sighted. It was an eye-opener for people to see how these two who represented a fairly large group of blind and visually impaired, orients themselves on finn.no. A smaller group of developers and interaction designers attended the whole workshop. We got an introduction to the law of accessibility and the requirements in practice. Stein Erik and Kristoffer both emphesized that the most important is to make sites user friendly; not the law itself. If we think of people with disabilities when we develop finn.no, it will lead to a better site for everyone. Even for those who have a headache one day or are sitting on a bumpy bus while browsing finn.no. The highlight of the day was perhaps "blindfolded lunch". All workshop participants put on ski goggles that were spray painted black so no-one could see anything. Then they were ushered around before being led to a prepared lunch table. The canteen staff from FINN helped to create an exciting lunch with different samples in small cups. It was a challenge to know where the food was, to spread the butter on the bread, and simply to understand what we were eating. At the end of the day the workshop participants tried out various ## GUI design DevFeed: [GUI design]() Original publisher: [Read original article]() Author: Graham King Published: 2005-10-23T16:15:29Z Content type: tutorial Language: en Sources: [Graham King]() Topics: [User interface design](), [User Interfaces](), [GUI](), [interfaces]() Tags: [cognitive-load](), [complexity](), [consistency](), [design](), [gui](), [interaction](), [interface-design](), [software](), [user-interfaces]() ### AI overview This article outlines basic user interface design principles for GUIs, websites, and other software. It emphasizes consistency, simplicity, visible system state, user control, reduced memory and cognitive load, short response times, undo support, and several approaches to displaying data. ### Source excerpt Designing intuitive user interfaces for effortless experiences.