{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Ilya Birman’s Blog: posts tagged feedback", "_rss_description": "Ilya Birman’s blog on design, cities, music, and life", "_rss_language": "en", "_itunes_email": "ilyabirman@ilyabirman.net", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/feedback\/", "feed_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/feedback\/json\/", "icon": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "346", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/one-spinner-is-enough\/", "title": "One spinner is enough", "content_html": "

In user interfaces, a spinner is a normal indicator of thinking or loading. However, the modern web is often build from blocks that could be loading independently. As a result, you got multiple spinners spinning:<\/p>\n

\n\"\"\n<\/div>\n

Not good.<\/p>\n

The application architecture should account for the fact that multiple things could be loading at once. Where would the spinner be displayed? In the case of multiple instances of the same block type, it’s enough to show the spinner in lieu of the first one. When the blocks are diverse, in general it’s best to put the spinner in the largest or the top-most block.<\/p>\n

The classic iPhone used to have a loading indicator right in the status bar:<\/p>\n

\n\"\"\n<\/div>\n

If memory serves, there was an API for an application to tell the status bar: “Hey, I already have an indicator in my interface, so don’t show yours”.<\/p>\n

But the art of thinking of how to avoid rubbish on the screen, has long been forgotten even at Apple, so you can’t expect this level of care from Twitter.<\/p>\n", "summary": "In user interfaces, a spinner is a normal indicator of thinking or loading. However, the modern web is often build from blocks that could be loading independently", "date_published": "2022-11-12T11:00:31+03:00", "date_modified": "2022-11-12T11:00:28+03:00", "tags": [ "feedback", "interface" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/twitter-multi-spinners@2x.png", "_date_published_rfc2822": "Sat, 12 Nov 2022 11:00:31 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "346", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/twitter-multi-spinners@2x.png", "https:\/\/ilyabirman.net\/meanwhile\/pictures\/iphone-statusbar-spinner@2x.jpg" ] } }, { "id": "320", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/hover-matches-click\/", "title": "The hover and click should match", "content_html": "

This principle seems obvious, but there are too many interfaces that violate it. Thus, a blog post.<\/p>\n

If an interface element exhibits some hover effect, the element should be clickable. If an element is clickable, it should exhibit some hover effect. The element’s hover and click areas should match down to a pixel.<\/p>\n

Here are some of the mistakes I’ve seen:<\/p>\n

    \n
  • A website main menu is composed of links, each wrapped into a container. The containers style includes a hover highlight. The containers are slightly bigger that the links because of paddings. Within the paddings themselves, the highlighting works, but the links do not.<\/li>\n
  • A link underlining is implemented so that clicking precisely at the line itself does not cause the link activation even though there is a hover effect. In some cases, it happens the other way around, too: there is no hover effect, but clicking works.<\/li>\n
  • To dismiss a modal popup dialog, you can just click outside of it. When the dialog is shown, the hover effect of the elements around it continue to work, even though clicking them will just dismiss the popup and not trigger the associated action.<\/li>\n
  • An element’s action is disabled by a script, but the hover effect remains. For example, a form’s submit button is disabled because of an incorrect value in some field, however is still reacts to a hover as if it worked.<\/li>\n
  • A large box with a picture and a heading is clickable as a whole and exhibits some hover effect. In the box’s corner, there is a small icon that does something else, say, adds the object to “Favourites”. When hovering the icon, the box’s hover effect remains, even though clicking the icon will not trigger the action, associated with the box itself.<\/li>\n<\/ul>\n", "summary": "This principle seems obvious, but there are too many interfaces that violate it. Thus, a blog post", "date_published": "2019-07-04T15:51:34+03:00", "date_modified": "2019-07-04T15:49:49+03:00", "tags": [ "feedback", "interface" ], "_date_published_rfc2822": "Thu, 04 Jul 2019 15:51:34 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "320", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "296", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/feedback-first\/", "title": "Feedback first", "content_html": "

    Here is my talk from FDConf, Minsk about feedback in the user interface:<\/p>\n

    \n