http://www.rssboard.org/rss-specification earthli News 3.7 en-us 720 https://www.earthli.com/news/ Sun, 15 Mar 2026 11:25:47 +0100 Sun, 15 Mar 2026 11:25:47 +0100 https://www.earthli.com/news/ https://www.earthli.com/news/icons/webcore_png/app/news_100px.png https://www.earthli.com/news/view_article.php?id=6078 https://www.earthli.com/news/view_article.php?id=6078 Sun, 15 Mar 2026 11:25:47 +0100 https://www.earthli.com/news/view_article.php?id=5955 https://www.earthli.com/news/view_article.php?id=5955 Tue, 20 Jan 2026 22:09:57 +0100 https://www.earthli.com/news/view_article.php?id=4967 https://www.earthli.com/news/view_article.php?id=4967 Mon, 25 Aug 2025 03:34:28 +0200 https://www.earthli.com/news/view_article.php?id=5444 https://www.earthli.com/news/view_article.php?id=5444 Fri, 21 Mar 2025 13:27:37 +0100 https://www.earthli.com/news/view_article.php?id=5407 https://www.earthli.com/news/view_article.php?id=5407 Sat, 22 Feb 2025 20:06:52 +0100 describes nine users, each of whom describes how they work with the Internet, as well as which assistive technologies they use to access text, audio, and video content. Each of them also has a list of use cases ("Barrier examples"), accompanied by solutions that would work for them and their particular restrictions. [Stories] The people range widely in capability. There's "Marta" , who is deaf and blind and who is "taking classes in fashion design and knows she will need to discuss her unique needs with the college since she will likely need class materials to be available on her braille display.". I mean, she's nearly blind and wants to be a fashion designer? Are we just not even trying to match capabilities to dreams anymore? I'm sure she has a sense of style but her ability to communicate it is not just limited, but just not efficient, no matter how accessible you make web sites or tools. "Lakshmi" , who is completely blind, is a more typical example of a user who is completely dependent on a screenreader that only really works well with well-structured, semantically sound pages that clearly label all elements (either in the content itself or using "ARIA" ), with headings and a logical structure that can be easily navigated. There's also "Ade" , who has limited use of his arms (and thus a pointing device). This the kind of ailment that could happen to anyone, should an accident temporarily rob you of the use of one or both arms. Keyboard navigation is paramount for Ade -- and a lot of users at various times. "Elias" has low vision, hand tremor, and mild short-term memory loss (he's 85). This comes for all of us, if we're lucky. Tiny text, silly contrasts, squirrelly fonts, and designers self-pleasuring themselves are the death of the web for these people. Large tables can be nearly unusable when zoomed beyond the size at which they were designed. "Lexie" , who has "deuteranopia and protanopia", also has problems with contrasts that other people can easily distinguish. "Ian" is autistic, for whom "[w]ebsites that spell everything out and don’t use metaphors are easier for me to understand." This is one I'd not considered in terms of a disability, but only because much of the world speaks English, but at B2 level or much less. They will understand basic-to-intermediate communication but you can't be breaking out idioms (there's one right there) that are highly culturally dependent, or even generationally dependent. Ian's not going to understand your clever quips. This is where things get quite difficult. To what degree do you dilute your presentation? Do you want to make art or something that everyone can use? Or is it good to keep Ian and non-native readers/listeners in mind, just in case you can quickly and easily think of a way of making something that is both artistic and accessible. A win-win. That also applies to users like "Sophie" , who has Down's Syndrome and gets "confused and overwhelmed when I’m on a page that has a lot of text." Look, maybe not everything is for Sophie, but this whole section makes me remember that non-native readers are also very limited in their ability to absorb text quickly -- or at all. If the writing style is too complex, then they'll be unable to use your site. This doesn't mean that you should write down to the lowest common denominator! It just means that you should keep it in mind, wielding your rapier wit and demonstrating your erudition where appropriate rather than partout. If you can't control yourself -- or don't want to -- then you can make sure that text is selectable and extractable so that LLM-based summarizers can manipulate it. This is a form of progressive enhancement as well -- some readers will see the high-falutin' version, while others will read a bare-bones summary, according to their needs and wishes. This same need also comes from "Dhruv" , who is deaf. He needs accurate captions in order to participate in classes or watch videos. Controls that allow him to slow down the content or easily pause/restart it are also immensely helpful. This goes for people watching content who are either not so quick on the uptake, who tire more quickly than others, or who are viewing content in a non-native language. "Stefan" has ADHD and dyslexia and falls somewhat into the same camp. I am much less a fan, though, of the rainbow-colored, karaoke-style-animated, and hard-coded captions right in the middle of the video that have begun appearing in many places, especially in short videos intended for dissemination on social-media networks like TikTok. This is not a progressive enhancement I find them incredibly distracting, pulling attention away from the actual video, which, for me, is often a demonstration of a programming technique. [We all need accessibility sometimes] Honestly, this is required reading for anyone building user interfaces. It really makes you think about what you're building. My main takeaway is that we all have varying capabilities at various times. Throughout our lives, we will acquire and lose capabilities. Sometimes our abilities range throughout the day, or from day to day. Are you holding a baby in one hand? Can you navigate the site with the keyboard? Did you break an arm? Did you have surgery on your eye? Are you tired? Sick? Is your screen really small? Really big? Did you get interrupted while filling out a form? Are you working in a non-native language? This stuff affects us all, to varying degrees and at varying times. [Takeaways] My technology and design takeaways are, * Rely on the platform as much as possible. It has excellent assistive support for built-in elements. * This goes double for forms and form elements. Be declarative (is it required?) and provide input examples (placeholders). * Keep it simple wherever possible. * Animation and effects should be optional. * Consider color and shape contrasts when grouping elements. * Respect user preferences for less animation, high contrast, or anything else that you can set in a modern browser. Leaning on the platform of HTML/CSS will give you a lot of these things for free. * Presentation should be consistent. * Everything should be zoomable and responsive. * Lean on well-established presentation conventions for the culture or cultures you're addressing. * Provide alternatives for images (captions) and videos (transcripts). * Content should be well-written, in that it should not run on and should be divided into easily navigated, logical sections. * Keyboard support is vital. * Longer processes should be resumable (e.g., return to a form in-progress). * Be careful with session timeouts. They're usually unnecessary and may be far too short for some years, effectively blocking them from using your site. ]]> https://www.earthli.com/news/view_article.php?id=5377 https://www.earthli.com/news/view_article.php?id=5377 Fri, 14 Feb 2025 18:09:36 +0100 https://www.earthli.com/news/view_article.php?id=5391 https://www.earthli.com/news/view_article.php?id=5391 Fri, 14 Feb 2025 16:10:57 +0100 https://www.earthli.com/news/view_article.php?id=5378 https://www.earthli.com/news/view_article.php?id=5378 Tue, 11 Feb 2025 22:03:14 +0100 , where I described their nearly deliberately obtuse navigation. [Online-account madness] Somehow, I never wrote about how poorly their onboarding process was for existing customers when they merged their online contact-lens store into their eyeglasses store. Spoiler alert: there was none. I finally figured out how to merge my accounts and was able to order contact lenses from the main/combined store but it took several attempts. This time, I was told that the account that I'd created no longer existed. My account at the old contact-lens site was still working but it only logged into what was very clearly a dead digital storefront. Instead of even trying to rescue my account, I just created a brand-new account, giving up on all of my order history and having to copy my lens product over by hand. This is an international company with a large presence in the DACH region. This is after years. They're just utterly incapable of managing their user accounts and handful of web sites. [Criminal font choices] Let's take a look at how it has decided to design its order page. [image] Do you see how much whitespace there is? Do you see the giant padding in the "Bestellübersicht" (order summary)? The fonts are tiny in the breadcrumbs, in the fields, and in the summary. This is for a store that sells eyeglasses. Their customers -- by definition -- cannot see very well. What's the point of all of this nonsense? There is more than enough room for much more accessible fonts. [LacklusterIncompetent validation] They're not only bad at accessibility but they're also terrible at basic UX. There is no client-side validation, even though all browsers off that for free these days. I usually avoid checking any boxes unless forced to do so. I suspected that I would have to select the second one, but there was no visual indication that this field is required. On submission of the form, I initially didn't see any change. The screen only scrolled slightly to bring that field more into view, leading me to suspect that this was the field that needed to be checked. [image] It was only after reloading the page and submitting again that I noticed the tiny, poorly aligned, and utterly innocuous error message thrown below the field like an afterthought. I added an arrow to the graphic to help you out. The screenshot below shows a closeup. [image] "Dieses Kästchen ist ein Pflichtfeld [This checkbox is required]" This is absolutely ridiculous and almost deliberately anti-accessible. ]]> https://www.earthli.com/news/view_article.php?id=4987 https://www.earthli.com/news/view_article.php?id=4987 Mon, 12 Aug 2024 16:06:38 +0200 https://www.earthli.com/news/view_article.php?id=4960 https://www.earthli.com/news/view_article.php?id=4960 Wed, 07 Feb 2024 22:28:21 +0100 https://www.earthli.com/news/view_article.php?id=4948 https://www.earthli.com/news/view_article.php?id=4948 Sun, 04 Feb 2024 13:18:11 +0100 https://www.earthli.com/news/view_article.php?id=4947 https://www.earthli.com/news/view_article.php?id=4947 Sat, 20 Jan 2024 12:16:26 +0100 , which has an easily browseable list of all concerts on a day, by venue, by city, etc. Now I know that my metalhead friend went to see "Beast In Black / Gloryhammer / Brothers of Metal" . [image] ]]> https://www.earthli.com/news/view_article.php?id=4928 https://www.earthli.com/news/view_article.php?id=4928 Mon, 15 Jan 2024 08:46:04 +0100 was built in 1996. I don't have much more to say about it, other than I just learned about it and I think it looks amazing. I dug up a few pictures from DuckDuckGo' image search. [image] [image] [image] [image] [image] ]]> https://www.earthli.com/news/view_article.php?id=4793 https://www.earthli.com/news/view_article.php?id=4793 Thu, 28 Dec 2023 13:15:10 +0100 A general error has occurred. Brilliant software, Swica. Top notch. At least the translations are pretty good. Except maybe for the "Now connect" button, which is obviously a direct translation of the German "Jetzt verbinden". Second time's the charm, though. [Garmin's OpenID provider] Now, I can connect to Garmin. There, I get to contend with Garmin's janky login form, which disables the "login" button randomly, then clears the password when you click on it. Second time was the charm there, too, but this is ludicrously bad. [Final thoughts] This is what these globe-girdling firms can offer us? They can't even get registration and login forms working? Am I the only one to whom this happens? Or am I the only one complaining about it? Are the rest of you complacent? Do you no longer expect anything to work in a way that doesn't waste your time? Ironically, it's my healthcare app that drives up my blood pressure. ]]> https://www.earthli.com/news/view_article.php?id=4820 https://www.earthli.com/news/view_article.php?id=4820 Sun, 19 Nov 2023 22:32:56 +0100 https://www.earthli.com/news/view_article.php?id=4856 https://www.earthli.com/news/view_article.php?id=4856 Tue, 07 Nov 2023 09:53:07 +0100 https://www.earthli.com/news/view_article.php?id=4837 https://www.earthli.com/news/view_article.php?id=4837 Sun, 22 Oct 2023 18:17:53 +0200 ) and the articles there almost always end with a delightfully eclectic mix of songs that I've been adding to a playlist and shuffling every once in a while. Update 2023-10-23: I just searched another song that ended up with very strange results, but I noticed that I'd inadvertently searched for "'m allowed by buffalo tom" rather than "I'm allowed by buffalo tom" (with the "I" missing at the beginning). [image] vs. [image] Looking more closely at the search argument in the original query from the body of the article, I see that it has a trailing " ". I wonder if the search algorithm is thrown off by punctuation? ]]> https://www.earthli.com/news/view_article.php?id=4798 https://www.earthli.com/news/view_article.php?id=4798 Tue, 10 Oct 2023 22:09:57 +0200 https://www.earthli.com/news/view_article.php?id=4671 https://www.earthli.com/news/view_article.php?id=4671 Sun, 29 Jan 2023 14:52:21 +0100 https://www.earthli.com/news/view_article.php?id=4261 https://www.earthli.com/news/view_article.php?id=4261 Sun, 29 Jan 2023 13:42:04 +0100 https://www.earthli.com/news/view_article.php?id=4621 https://www.earthli.com/news/view_article.php?id=4621 Sun, 04 Dec 2022 22:15:48 +0100 is about a nice feature in Azure DevOps called Branch Policies that allows you to protect the default branch in a given repository, or in all repositories. If you have a lot of repositories, it's quite convenient to be able to set it once for all of them. However. However, Azure DevOps also has a nice feature called the Project Wiki, which includes an online editor that makes editing easy enough for any user with even the most basic technical skill-set (whether developer, supporter, project manager, or product owner). The Project Wiki is backed by a Git repository. As soon as you set a default branch policy for all repositories in a project, it affects this repository as well. If you protect the default branch, then users will only be able to edit the Wiki by cloning the repository, creating a branch, committing changes there, and then creating a pull request. This workflow locks out a considerable number of users who were able to participate before. Microsoft closed this issue as "Not a bug" because they said that applying branch policies to all repositories is "by design". What they actually meant was that they "will not fix" it. It's a bug. There's even a name for it: it's called a leaky abstraction. Whereas users were able to edit the Wiki before without knowing anything about Git, with branch policies enabled, they are suddenly confronted with the underlying abstraction. It has "leaked". There are workarounds: instead of setting branch policies to protect the "default" branch, you can set your branch policy to apply to "master" or "main" (or both). This policy won't apply to the Wiki repository because the default branch there is named "wikiMaster" (presumably for exactly this workaround). ]]> https://www.earthli.com/news/view_article.php?id=4573 https://www.earthli.com/news/view_article.php?id=4573 Tue, 27 Sep 2022 21:42:39 +0200 shows the following UI elements from the gaming platform Steam. [image] That looks pretty bad, right? There is no consistency at all. However, the first "comment" is pretty astute: "Steam, being as successful as it is, makes me interpret this post as saying that having a design system is not important." Design’s not the only thing, that’s for sure. Market dominance definitely trumps design. But you could do your users a favor and lower the impedance incurred by using your product. In these days of security holes and phishing, a consistent design helps your users make smarter decisions, by default. If users can’t tell what your standard design is, then they can’t be alert to times when the standard design is not followed. It’s kind of like when the U.S. had 3 (or 4?) different kinds of 20-dollar bills in circulation. That opened the door to counterfeiters not even having to try real hard because you could just say “oh, that’s the new $20 … don’t worry about it. I just got it from an ATM.” ]]> https://www.earthli.com/news/view_article.php?id=4519 https://www.earthli.com/news/view_article.php?id=4519 Mon, 06 Jun 2022 09:24:23 +0200 https://www.earthli.com/news/view_article.php?id=4499 https://www.earthli.com/news/view_article.php?id=4499 Mon, 02 May 2022 09:10:49 +0200 https://www.earthli.com/news/view_article.php?id=4464 https://www.earthli.com/news/view_article.php?id=4464 Sun, 06 Mar 2022 11:21:29 +0100 https://www.earthli.com/news/view_article.php?id=4417 https://www.earthli.com/news/view_article.php?id=4417 Sat, 08 Jan 2022 21:35:29 +0100 from a friend. It doesn't offer to connect to the ChromeCast. That's probably because I'm using the Opera browser. Fine. Time to install Chrome on the laptop. Fire it up. Log in to PlaySuisse. ChromeCast option is available! Casting.... Casting... Casting... Yeah. It's connected, but it's not going to play anything. Why would it? [image] Reload. The ChromeCast icon disappears. Reload. It's back! Cast. Casting... Casting... UGH. [SRF TV?] OK. One more option. Let's go see if we can replay from "SRF TV" directly. OK. It sees the ChromeCast. Let's try... Casting... It's on screen! Cool. Now, can we turn on subtitles? [1] Nope. You can only turn on subtitles when you're not casting. Disconnect. Turn on subtitles. Reconnect. No subtitles. [image] [UPCTV?] OK. One more shot. There's also "Sunrise UPC" with its own replay function. Hey, that can also cast to the ChromeCast. It also lets you set subtitles. Let's go! Hmmm...it's 01:08:00 instead of 56:00. I guess for the pleasure of watching it via a web site that I pay for every month, I'm going to have to watch eight minutes of commercials. Neat. Well, if it has subtitles, I guess I can fast-forward through the commercials. It doesn't. It doesn't have subtitles. OK. Fine. Back to the original source at SRF TV, where there are no subtitles, but also no commercials. [image] [What have we learned?] This is really not so easy. I imagine many, many others wouldn't have gotten this far and would have probably just watched it on their tiny phone. I have a media box and I know I could connect it and probably get it to show my replay content directly. But now I'm wondering whether it would serve me eight minutes of commercials, like the web site. Should it be this difficult? I've paid for all of these services, but they don't do what I want. It's no wonder that most people end up watching TV on whatever device they've managed to get a stream running on. If we back up a bit, I understand that I'm complaining at a very high level. I'm talking about pushing Full-HD streams around to different devices. This is magic, right? That I even have three or four ways of watching a TV show that aired last Tuesday is already an inconceivable luxury compared to just 10 years ago. But they just don't interoperate in the ways that they've promised -- and in ways that are entirely feasible if they weren't all so focused on making you pay for more things. I know that a lot of these barriers are artificial, that they're imposed by the bizarre collection of commercial interests that are involved every step of the way. This is the way of the world. Technological promises without end. And we can't even really get the easiest stuff right. This is why I'm always so skeptical of amazing new technologies. I fervently want them to work, but I worry that they'll work pretty much like everything else: a bare minimum of functionality that just keeps you from canceling your contract. And that's only because canceling would be another slog through a semi-functional technological process. Everything's a scam these days. Even when they provide some functionality -- which is amazing compared to what we had decades ago -- you still end up with a bad taste in your mouth, because there are even more amazing things that you've actually paid for and that they're not delivering. What I'm saying is, is that we could have even nicer things if everyone weren't so damned concerned with the primary mission of shoveling money into their fat faces. -------------------------------------------------------------------------------- [1] No, I don't need English subtitles. The show is in Bärndütsch (a very different dialect of the Züridütsch that I'm used to) and a lot of the people are mumblers, so I like to have the subtitles as backup. It was absolutely fine without them, though. Almost better, to be honest. I guess by season four, I'm used to it. "Needs must when the devil drives." ]]> https://www.earthli.com/news/view_article.php?id=4406 https://www.earthli.com/news/view_article.php?id=4406 Wed, 29 Dec 2021 18:33:27 +0100 https://www.earthli.com/news/view_article.php?id=4394 https://www.earthli.com/news/view_article.php?id=4394 Thu, 23 Dec 2021 13:07:43 +0100 . [4] I actually re-checked the setting just to be sure: yes, it's set to "metric". [1] I don't even put every activity on Strava (e.g. strength or yoga workouts at home). 💪 [1] On a side note and, while we're actually on the topic of accessible web sites, the Velominati web site uses a simple HTML unordered list and CSS to style it the way they'd like. Very nice. ]]> https://www.earthli.com/news/view_article.php?id=4393 https://www.earthli.com/news/view_article.php?id=4393 Thu, 23 Dec 2021 10:47:28 +0100 https://www.earthli.com/news/view_article.php?id=4368 https://www.earthli.com/news/view_article.php?id=4368 Fri, 19 Nov 2021 22:22:12 +0100 https://www.earthli.com/news/view_article.php?id=4360 https://www.earthli.com/news/view_article.php?id=4360 Thu, 18 Nov 2021 08:27:30 +0100 "again" [1], confronted with the awfulness that is TacX Desktop. I fired it up and was confronted with all of the same bugs and UX missteps that I'd noted a year ago. It's like the app hadn't been updated at all. I got suspicious because I have a friend who uses his TacX regularly and he wouldn't put up with this crap...so what is he using? I searched the App Store again (MacOS) and found a TacX Training app as well as the TacX Desktop app I already had. tl;dr: Good news: The TacX Training is a much better app than TacX Desktop. It's the same app on iOS as well. My only quibble with TacX Desktop is that they should kill it already. If they can pop up a notice every single time asking me to grant permission to use a sharing feature that I don't want, then they could pop up a notice informing me that TacX Desktop is end-of-life and that I should switch to TacX Training instead. There is no advantage to TacX Desktop that I can see. The only extra feature that I see is that you can create workouts directly in TacX Desktop whereas TacX Training sends you to the web site to do so. However, TacX Desktop doesn't allow you to edit a workout, whereas the version in the cloud does. There is no local storage for TacX Desktop, so there is no real advantage to the feature: you're still storing in the cloud. The editor in the app and on the web site look and feel exactly the same. [image]The TacX Training App seems fine, so far. I don't use the movies or the training plans or anything but my own workouts. I have seen some user comments complaining about the "opponent" feature, but I'm not using that. I'm not really interested in watching a video of the outdoors in the summer -- I'd rather watch a more-distracting TV show or movie -- or in competing against random people [2], or in a training plan that makes me sit on the bike for 90 minutes, pedaling at 50% or 68% power. If I'm going to sit on a bloody bike indoors, it's not going to be for a recovery ride -- I'll just go for a walk or hike outside instead. I'd offer the following suggestions to the developers, but that's all I can think of right now. * It would be great to be able to clone a workout, so that you can make a slightly longer/shorter/harder/easier version * The ride is imported correctly into Garmin Connect, but the corresponding Sync to Strava doesn't include the elevation change, for whatever reason. Maybe this is Strava, though. -------------------------------------------------------------------------------- [1] The two previous articles were, * "The TacX App in 2020" (December 2020) * "Pushy Apps" (February 2021) [1] I suppose I could try to set up appointments to ride virtually with friends, but only one person I would ride with is in my time zone. Another is shifted by 1 hour and another is shifted by 6 hours. ]]> https://www.earthli.com/news/view_article.php?id=4345 https://www.earthli.com/news/view_article.php?id=4345 Sat, 06 Nov 2021 17:13:17 +0100 https://www.earthli.com/news/view_article.php?id=4196 https://www.earthli.com/news/view_article.php?id=4196 Mon, 01 Mar 2021 22:27:44 +0100 https://www.earthli.com/news/view_article.php?id=4193 https://www.earthli.com/news/view_article.php?id=4193 Sat, 27 Feb 2021 23:35:11 +0100 by Stephen King featuring a store named Needful Things where "[t]he proprietor [...] always seems to have an item in stock that is perfectly suited to any customer who comes through his door." ]]> https://www.earthli.com/news/view_article.php?id=4168 https://www.earthli.com/news/view_article.php?id=4168 Sat, 06 Feb 2021 18:48:23 +0100 https://www.earthli.com/news/view_article.php?id=4135 https://www.earthli.com/news/view_article.php?id=4135 Fri, 01 Jan 2021 10:02:34 +0100 https://www.earthli.com/news/view_article.php?id=4126 https://www.earthli.com/news/view_article.php?id=4126 Tue, 29 Dec 2020 18:05:11 +0100 https://www.earthli.com/news/view_article.php?id=4047 https://www.earthli.com/news/view_article.php?id=4047 Sun, 20 Sep 2020 21:29:19 +0200 . After a dozen more years, the plastic casing on the wire leading to the outside thermometer had become very brittle -- especially after years of being shut into the window casing as we opened and closed it. I was able to repair the cable several times, but it finally frayed too close to the sensor nodule for me to be able to repair it. It had outlived the company (Radio Shack) that produced it by five years. [image]We went to the Migros Do-It Center to pick up a new weather station. The new ones are all much fancier with a plethora of features, none of which obviously combine to form a product I'd like. We ended up picking one that looked reasonable and had a colorful display, because why not? We got it home only to discover that it doesn't quite satisfy. What's wrong with it? Well, it's just a bundle of unsatisfying design decisions that leads you to wonder whether anyone actually works with use cases. You can either plug it in, in which case it is on all the time or you can use batteries, in which case it is on for only five seconds after you press a balky button on top. You have to give it a good press to turn it on. The old weather station was just on all the time, but with an LED that you could read in the daytime. We have another weather station in the kitchen that is the same, but has a back-light that you can turn on by -- get this -- pressing a small button on the back. This would be massively inconvenient if I hadn't had the brilliant idea of mounting it on the wall and putting a little stick-on rubber nodule on the wall aligned with the back-light button. So, you can just press the front of the screen, activating the button on the back, and temporarily illuminating it. You can't read it at night from a distance, but that's not a requirement. The new weather station advertises itself as coming with a pedestal, which is fancy. However, the cable is so short that there is no place I can put it so that it reaches a power outlet. Adding an extension cord to the already bulky power adaptor seems like massive overkill for a weather station, as well as being ugly as hell. Luckily, the place where I'd mounted the old weather station was just above an outlet, within reach of the 1-meter cord. However. However, the fancy pedestal is not an optional component. It is a permanent part of the case, so it protrudes from the back of the device instead of presenting a nice flat surface to lie flush with the wall. This doesn't seem to have bothered the designers at all, as they chirpily put a hole for a hook or nail directly above the 1-cm protrusion. So, my next job was to install a much more stable and longer hook than the old weather station had required -- that one was light and flat enough to hang from a short nail rather shoddily placed in the wall. No drilling required for the last dozen years. Now I've got the clunky thing mounted and plugged in and it's time to set up the outdoor thermometer/hygrometer. My office window has blinds and faces the main walkway along the building. There is nowhere to put the device other than on the window sill or taped to the window. I taped it to the window. It fell off less than 12 hours later. I now have it lying on the window sill, just waiting to fall out the first time we actually raise the blinds -- which we almost never do -- or for one of the neighborhood kids to take a shine to it. Still, the weather station is now installed and functional. And it's so colorful. But. But, the number that is the most important to me -- outside temperature -- is in a darkish-blue on a black background, which is difficult to read at a distance. For most of the morning, the sun shines in the window, making it even harder to read. I can read the indoor temperature, the barometric pressure, the phase of the moon, and the time perfectly. In fact, the time is, for whatever reason, the biggest read-out on the screen. It's as if the designers thought to themselves, "I know they bought a weather station, but shouldn't the most prominent piece of information be the time? What's the point of knowing the temperature if you don't know what time it is?" Did I mention the phase of the moon? What phase would you say the weather station is showing? A new moon, right? One look out the window on the night the picture was taken reveals a moon that is positively full, a veritable spotlight. It's not as if I don't have any other clocks in the house, or on my arm, or on my phone. Can we please just focus on delivering the information specific to the device? At any rate, I've now got a clunkily installed weather station whose screen never turns off, but on which I can often not read the most important piece of information. In most light conditions, the weather station is an excellent clock, but is terrible at telling us the outside temperature. It shines all night, permanently semi-illuminating my office. [1] Were I to use batteries instead, I would have to constantly test the stability of the hook I'd installed by pressing down on a balky/sticky button on top of the front edge of the screen, which juts out 2cm from the wall, most likely dashing the whole thing to the floor on the second or third try. I miss the 25-year-old weather station already. Now, I just have to convince my wife to let me return this one within 7 days and try again with another one. I've got my fingers crossed that I don't have to write a follow-up post. [image]As luck would have it, that would not be the case. It turns out Migros in Wetzikon is so gigantic that they have two places with weather stations: the hardware center and the electronics center. Each has completely different weather stations. Kath says there are even more online. I found the best one, pictured to the left. It only has the information that interests me, along with the nearly unavoidable clock, which is, at least, displayed in a smaller font than the temperature, unlike nearly every other weather station on offer. It is pictured with its soothing orange backlight engaged. The light turns off after a few seconds. It is activated by a large and easy-to-press button on the back. It is only battery-powered and the display is active in non-backlit mode at all times. The controls are intuitive enough that I didn't need the manual to change it from the default AM/PM setting. All's well that ends well. -------------------------------------------------------------------------------- [1] Casual light pollution definitely seems to be a design trend. As I sit here, in semi-darkness, I am warmed by not only the glow of my weather station -- the blue-on-black is eminently legible in this light -- but also an absolutely penetrating red glow from a portable vacuum that insists on announcing that it's CHARGING as well as a clock on the oven in the kitchen that is not only blinding, but is also positively superfluous and cannot be disabled. As I noted above, I am not lacking for portable chronometers. The oven's job is not to crow the time 24 hours per day -- and, yet, this is what it does. ]]> https://www.earthli.com/news/view_article.php?id=4007 https://www.earthli.com/news/view_article.php?id=4007 Tue, 23 Jun 2020 21:48:34 +0200 https://www.earthli.com/news/view_article.php?id=3983 https://www.earthli.com/news/view_article.php?id=3983 Tue, 26 May 2020 22:18:07 +0200 Please remove invalid characters from phone number field (sic) [3] I started with copy/pasting the phone number straight out of Apple Contacts: +1 (789) 555-4338 Please remove invalid characters from phone number field (789) 555-4338 Please remove invalid characters from phone number field 789 555-4338 Please remove invalid characters from phone number field 789 555 4338 Please remove invalid characters from phone number field 7895554338 Please remove invalid characters from phone number field At this point, with numbers being the only potentially "invalid characters", I was at my wit's end. [4] I gave up and typed in a random phone number from the town where I grew up. Accepted. Pathetic. It's bad enough that they only validate the number and don't tell you what to fix. A better solution would be to return a normalized form and ask the user to approve it. E.g., "did you mean +1 (789) 555-4338?". They do something like this for the zip codes already. If they are incapable of that, then they should improve on the catch-all error message, which is not useful. It should indicate -- at the very least -- which characters are valid and should include an example of what they're looking for, so I can emulate it. The whole purchase process is balky and unpolished; it's exactly what I would expect from a monopoly that doesn't have to care about its customers' needs -- because it's the only game in town. [5] -------------------------------------------------------------------------------- [1] I was using a desktop browser. [1] This has been mangled to a non-functional number. The original phone number was both correct and valid. [1] It should read "phone-number field". [1] I suspected that there was a non-printing Unicode character in there somewhere -- e.g. a ZWJ (zero-width joiner) or something -- but wasn't in the mood to humor Amazon's atrocious validation any further at that point. [1] For example, there's the very sleazy way they try to trap you into signing up for Prime -- several times, in different ways and throughout the purchase process. Also, their shipping options are nearly deliberately misleading and oddly priced. Would you like it two days sooner and free? Sign up for Prime! How about two days later but free? That's an option, too. How about one day later but costing $8.50? What? Why would I do that for one business-day fewer? Is that somehow more reliable than free? Is there a catch I'm not seeing? Why is there even an option for $12.50 with another, different span of days? Finally, their web application still uses the buttons from 20 years ago: the graphics are fuzzy, low-res icons with built-in borders. They haven't changed a bit. Once you're on one of these pages, you can't even navigate back to the site to add more items (I was in the "adjust quantities" page). ]]> https://www.earthli.com/news/view_article.php?id=3821 https://www.earthli.com/news/view_article.php?id=3821 Wed, 16 Oct 2019 22:37:21 +0200 https://www.earthli.com/news/view_article.php?id=3749 https://www.earthli.com/news/view_article.php?id=3749 Sun, 30 Jun 2019 18:53:21 +0200 , I'd recently added the book Rape: From Lucretia to #MeToo by Mithu Sanyal to my Amazon Wishlist. Soon after, I received an e-mail from Amazon that they were giving me a one-week, five-dollar coupon toward the purchase of the book. That sounded good to me. I clicked through to the book's page, where I saw that, indeed, a five-dollar credit would be applied were I to purchase the book. [image] However, when I elected to "Buy now with 1-Click", I landed on an order-summary page that showed a different coupon for $3.04 had been applied, but that my original $5 coupon was missing. [image] I thought maybe it had something to do with 1-click, so I turned that off in the settings. FYI: you can't disable 1-click purchasing on Amazon. There's an option to disable it, but it doesn't actually disable anything. But I digress, because that's a whole other usability/false-advertising problem. Since it was only a matter of a few bucks, I took the chance that Amazon's site was just incapable of displaying a one-time-only coupon as well as a previous credit. I could hide the old credit, but couldn't get it to show me the coupon. I placed my order and was greeted with the following order summary. [image] Both credits had been applied on the final order, which is good. That a site that handles over 50% of America's (and probably much of the West's) purchases doesn't have a portal that can display the details of slightly more-complicated orders is not. ]]> https://www.earthli.com/news/view_article.php?id=3687 https://www.earthli.com/news/view_article.php?id=3687 Wed, 30 Jan 2019 21:40:49 +0100 . I see my resumé more as a description of my career than as a document with which I can get hired. As a partner in a company, it's good to have an up-to-date profile handy, e.g. for including in RFPs. One step was to write down the history of my more-recent projects and skills. In addition, though, I wanted to update the look and functionality a bit. The latest version is "here" . You can see a full-screen rendering to the right. [Requirements] * Information Overload: I've been programming for 35 years and doing so professionally for 25. A standard structure doesn't really cut it for packing in that much information. I don't want to leave anything out, but I want there to be summaries of some of the more text-heavy sections. So, I summarize projects and skills with charts instead of lists. * Accessibility: I wanted to improve the accessibility of the by-now three-year--old version. The HTML wasn't as semantic as it could have been, particularly in the charts. I wanted the document to be legible, even when viewed without any styling at all. * Rendering: I also wanted to improve the accuracy of the charts. The bars on the charts in the existing version didn't line up very well, particularly at some zoom levels or page widths. * Mobile Support: The existing version wasn't very mobile-friendly. It was somewhat responsive, but wasn't clean enough at low resolutions. * Printing/PDF: I wanted a user to be able to print from the browser with reasonable reliability. I provide a "pre-rendered PDF" , but anyone can just print the HTML page with a modern browser to get a PDF or printed version. * Lead by Example: I wanted my resumé to serve as an example of my work, to provide evidence of my skills as a full-stack developer (at least as far as usage of CSS and HTML goes). [Design] I'd already tackled the challenge of displaying a career as long as mine in an apprehensible way in the existing version of my resumé by summarizing my projects and skills in charts, with the years on x-axis and individual items on the y-axis. For projects, I used color-coding to indicate the roles. For skills, I used color-coding to indicate the level of proficiency. This concept served well to offer a good overview. I left this concept largely unchanged, but made the following improvements: * Included a legend on each chart instead of only once, at the top * Included the years for each row (for projects) * Moved the labels next to the bars rather than partially overlapping * Tighten up the presentation and calculation of areas [Implementation] These are among the techniques I used to build a page that satisfies all of the requirements above: * Flexbox: This CSS display type is really quite optimal for a responsive text-flow. The result is tiles of data that flow into as many columns as fit nicely into the viewport width. In addition to the main layout, now the charts also use flexbox, a much better layout than the margin-based spacing approach I'd used in the previous version. * Semantic HTML: I use lists and list items wherever it makes sense, then style them to fit the overall theme. A screen-reader, however, just sees lists. I applied the same concept for the charts, rebuilding them with tables instead of generic containers. Again, a screen-reader can deal with a standard table instead of trying to make sense of non-semantic containers. In the charts, I included the proficiency data in a separate column, but hid it in the styled view. * Colors: I'd chosen the previous chart colors manually. That version had the restriction that dark text had to be legible on the bars, artificially restricting the breadth of the palette. In the current version, labels are next to the bars, so I'm no longer restricted and was able to use an online "data-color picker" to choose colors that are accessible for more seeing levels (and also when printed with grayscale). * CSS calc(): Instead of calculating and storing high-precision percentages for column widths, I now use the CSS calc() feature to let the browser calculate all dimensions at a level of precision that matches its own rendering engine. * @media queries: For responsiveness, I rely on both flexbox (as noted above) and @media queries to define a few "breakpoints" in the layout. At lower resolutions and widths, * Year labels for data bars are removed * Major headers are no longer in a separate column * Legends are moved above their respective charts * A smaller font is used in charts * Printing commands: Since the layout flows so naturally, I only had to use page-break-before: always a few times -- mostly before the charts -- in order to ensure clean printing on an A4-sized page. * attr() content: In order to avoid cluttering an unstyled page with elements relevant only to the charts, I use the attr() CSS function to inject content like legend captions or year headers. These values appear in styled content, but are hidden in unstyled content. [Examples] [Project History: Wide] This is part of my Encodo history, rendered for wide screens. It includes a legend as well as a year-span for each row, to the left of the chart. This chart gives a nice overview of where Encodo fits into my overall time as a programmer as well as the diversity of projects and roles I've had on often-simultaneous projects. Each of these projects is listed individually below the chart, but it offers a much more intuitive view of how those projects fit together. [image] [Project History: Medium] The next size is "medium", for larger, more-modern phones. At this level, the year headings are removed and the legend moves above the chart, to avoid overwriting content. Also, the chart font is reduced to shorten captions. At this width and for this chart, that's less likely until the screen gets even smaller, but for other charts, information is more centered and overlap happens more quickly. [image] [Project History: Tiny] Finally, there is the tiny version, optimized for screens like the iPhone4. The only change here is that the captions are rendered in an even-smaller font, to avoid leading captions from pushing bars to the right. [image] [Skills History: Wide] For the skills charts -- some of which start quite early in my life -- I've used soft hyphens (­­­­­) in some longer captions, to ensure proper wrapping (e.g. for HyperCard). This is the wide version: [image] [Skills History: Medium] As with project histories, the skills charts move the legend above the chart, when displayed below a certain width. [image] [Skills History: Tiny] As with the projects chart, the skills chart renders remarkably well on tiny screens. [image] [Unstyled Charts] Finally, the following graphic shows examples of the projects and skills charts without any styling at all. As you can see, these charts are just standard HTML tables and are quite legible for screen readers, complete with proper headers and cells. [image] I also tested this document with Safari's and Instapaper's reader modes. These work, for the most part, but both of these renderings make a bit of a hash of the tables/charts, each in their own way. [Safari Reader] The Safari Reader does an admirable job with the headings and lists that comprise most of the document. However, it doesn't render the third column -- "Roles" and "Level", respectively -- because it heeds the CSS that hides those columns. I haven't yet come up with a solution for user agents that only use a part of the CSS. [image] [Instapaper Charts] Instapaper also does a good job with the majority of the document, but also stumbles a bit when rendering the tables for the charts. In this case, Instapaper properly ignores all of my CSS -- including the command to hide the third column with "Roles" or "Level" -- but doesn't really do the table structure justice, formatting it as a single, long line of text. [image] [Conclusion] Overall, I'm pretty happy with how the final version turned out. I'm sure there's room for improvement design-wise, but I think the charts are pretty good. In particular, I think I've managed to "Lead by Example" in designing and building a more-complex web page for all types of user agents and users. -------------------------------------------------------------------------------- [1] I'm looking at you, LinkedIn recruiters. ]]> https://www.earthli.com/news/view_article.php?id=3389 https://www.earthli.com/news/view_article.php?id=3389 Sat, 04 Mar 2017 17:26:00 +0100 https://www.earthli.com/news/view_article.php?id=3352 https://www.earthli.com/news/view_article.php?id=3352 Sun, 08 Jan 2017 22:19:33 +0100 . " Ideally, you'd have a VSG (Visual Style Guide) and an Interaction Design. [VSG] The VSG includes design details like colors, gradients, fonts and standard dimensions as well as details about components/controls, like for icons, properties like, * margins * padding * separation between label and image * alignment of image * variants (image to side, image on top) or for similar properties for controls, like, for example, * buttons * tabs * list items * tooltips * callouts * flyouts * etc. or even complex controls, like grids, with properties like * where to place icons * how to align text * how to wrap text * are there buttons or a drop-down to manipulate the row * etc. Depending on what you're building, a VSG will include instructions for how components are displayed in different media, like small-screen, responsive, etc. Basically, the VSG is a dictionary with the answer to every question you have about how to style a component in the target platform/technology/media, generally defined in a platform/technology-agnostic way. [Interaction Design] The Interaction Design includes instructions on how to create UIs using the components defined in the VSG. These are the higher-level rules for how to combine components/controls to build screens. It answers questions about * how to display extra information to the user * how to show errors * how the user moves between related screens * how the navigation history is displayed * how the user manipulates data: * auto-save? * How/when to validate? * How to bulk-edit?) * * how the user searches: * auto-suggest? * Or enter to show results? * How does paging work? * Are details shown in-line? * where standard information is displayed * * where control surfaces are: * Is there a user-login area on-screen? * Separate from the main navigation? * Or combined? * What about content/context-specific actions? * What about list-item-specific actions? Again, this design may also include details on how to adjust compositions/interactions based on the media/context, like small-screen, responsive, etc. Basically, the Interaction Design is a dictionary with the answer to every question you have about how to compose components to represent the screens in workflows and use cases, also defined in a platform/technology-agnostic way. [Vs. Reality] I deliberately wrote "ideally" above because, often, the specifications you get/have will fall short of this. However, remember that whatever isn't in your specification will have to be decided on-the-fly and ad-hoc and most likely differently in different situations, most likely by the wrong person (the developer). A tooltip is going to have some sort of style even if you don't actually specify it. Unless you're really disciplined -- even if you're a one-man team -- you're going to end up with noticeable inconsistencies. You'll either have to live with them or invest a lot of time to eradicate them. [Better than wireframes/screens] The nice thing about working from documents like this rather than wireframes for very specific situations is that it's much easier to build new, unforeseen screens without further help from the designer. That is, instead of having to wait for the designer to make the screen or, instead of just winging it and building the screen based on what you see in other, similar screens, you have a very specific instruction manual on how to style and compose your building blocks to create new screens. Another advantage is that there is a canonical, agreed-upon specification for how things are done to resolve disputes and clarify questions. ]]> https://www.earthli.com/news/view_article.php?id=3279 https://www.earthli.com/news/view_article.php?id=3279 Mon, 13 Jun 2016 21:16:14 +0200 . However, I hadn't updated my project list or resume format since 2002. I'd also seen a lot of resumes cross my desk when we were hiring last year, with some good ideas and some bad. I wanted to try out some ideas I had to improve formatting, legibility and information density/comprehensibility. There were a few main areas that I thought I could improve in the "standard" resume format. I've got a strong first draft, but I'll be tweaking it again after letting it sit for a bit. You can check out the current version here: "Resume 06.2016" ("PDF" ) [Requirements] What problems am I trying to solve? * A plain text listing of skills leaves a lot to be desired. How competent are you in that skill? How many years have you used it? When did you last use it? * Many IT jobs are project-oriented, so listing employers isn't sufficient. On the other hand, if you list a lot of projects, it's hard to see how long you worked at an employer. How long was a project? Did you ever work on overlapping projects? Which roles did you have in the project? Did those roles change over time? * If you're a bit long in the tooth and have a lot of projects and/or employers, the standard format doesn't fit very well, either. Information is spread out and difficult to process as a whole. [Ideas & Solutions] I've come up with some ideas for answering these questions at a glance, using a combination of responsive text and charts. * Show items in a grid instead of sticking to a strictly top-down format, which wastes space and leads to long lines that are hard to read. * To address career length, summarize on the first page and list projects on following pages. * Use charts to summarize long lists/grids. * Use the X-Axis of the chart to indicate chronology (years) * Use colors to indicate roles in a project or competence level of a skill * Use striped colors to indicate multiple roles in a project * Each project or skill gets a bar from start to end of project or use of skill * Overlaps in the chart indicate working on multiple projects at once * A change in color or striping indicates a change in role * Make sure that generating a PDF or printing the document works well and doesn't waste paper Armed with these ideas, I came up with a responsive set of CSS styles. On top of that, the print styles are configured to create a very pleasing printout, in both portrait ("PDF" ) and landscape. [Skills Timelines] [image][image]Since I started programming in 1985 (more or less), I started all of my timelines with that year. To the left, you can see a full-width version of techniques and languages, with the legend and main title to the left of the two charts. To the right, you can see that the responsive, highly compressed version is still very legible and useful, with title and legend above. The intensity of the color in the bar indicates skill level, so you can make sense of the chart even if the legend has scrolled out of sight. [Projects Timeline] The projects timeline is very similar, starting at the same year so that all charts are consistent. As indicated above, the overlap and coloring/striping nicely shows simultaneity and roles. The legend is again to the left. [image] I'm not quite yet perfectly happy with the striping because it's more difficult to see which roles are actually involved in a project, but it's a start. In the closeup, you see the coloring a bit better, but without the legend, it's much harder to remember what's what. Still, it's pretty and formats quite well, even for mobile devices. [image] So, as of June 2016, I'm more of less up-to-date with my work history. Not only that, but because the format is very declarative and uses semantic HTML, I have much more incentive to keep it up-to-date. ]]> https://www.earthli.com/news/view_article.php?id=3215 https://www.earthli.com/news/view_article.php?id=3215 Mon, 08 Feb 2016 19:37:22 +0100 tl;dr: If you think you've finished signing up for UPC Cablecom Replay but have never used it, think again. In order to completely enable it and to be able to use it, you have to actually try using the service from the Guide. It is at this point that you will be required to confirm yet another activation-acceptance dialog before Replay is available. Even then, it's enabled only for content aired after this final confirmation. So go use it now for any old crappy show just to finish enabling it for when you really need it. We have a UPC CableCom Mediabox. It's a DVR, so we can record any content we like, up to about 100 hours or so. The Super Bowl is on really late for Central Europeans, so we cheerfully enabled the "record" icon on the Super Bowl on BBC2 and went to bed. The Mediabox interpreted our command as a suggestion and failed to record a single minute of the Super Bowl. [Set up Replay] Never fear! This had happened before and we'd set up a free service at CableCom called Replay. I have no idea why you have to explicitly sign up for a service that is included free as part of the UPC Cablecom package, but there it is. [1] We set it up the last time we'd failed to record a Vuelta a España stage that we had really wanted to see. Even at that time, we signed up for Replay and were greeted with little Replay icons on a lot of the content in the Guide. However, anything older than now didn't have an icon. We scuttled back to the web site to discover that having signed up for Replay ex post facto did us no good in the case of the Vuelta stage in which we were interested. Replay was only enabled on content that aired after your acceptance of their license agreement. This seemed at the time like a needlessly shitty restriction since CableCom has the prior 30 hours of all channels recorded anyway. The service is free, so what's the harm in letting me use it immediately? [2] [Disapproval] Ok, fine. Replay activated. License accepted. Time to move on. [3] [Use Replay] So we come to the Super Bowl, which failed to legally record on our legal DVR that captures content for which we've paid legally. No problem. I signed up for Replay months ago. Fire up the Guide, switch to BBC2, scroll back one day and VOILA! There's the Super Bowl broadcast at some ungodly hour of the morning. And there, right in front of it, is the shiny Replay icon. Click. "Please select OK with your remote control to indicate your acceptance of the license agreement for Replay. [4]" OK. "You have activated Replay. Only content aired after your acceptance of this license agreement will be available via Replay." [Anger] But I'd already accepted the license agreement once when I signed up for it! This system is absolutely designed to ensure that the first piece of content that any given Replay user selects will be unavailable. So here's my advice to anyone who wants to use Replay: after you've enabled Replay for the first time, use it. Use it for any old program, it doesn't matter what. Just make sure you've accepted all of UPC Cablecom's multiple agreements before you want to use Replay for content you actually care about. As for the Super Bowl? It's not like I'm not watching it right now -- and commercial-free, to boot -- but why make it such a fight? And why is it that the path to content that is legal and purchased is always far less well-paved than the free one? Being more expensive and shittier is not a good business model. -------------------------------------------------------------------------------- [1] As we will find out, you actually have to sign up twice. [1] I'm totally aware that it's probably something to do with the content-provider agreements, but it's still utter horseshit from a design/user-experience perspective. [1] We will find some other way of obtaining content, I suppose. [1] I'm paraphrasing the citations of text from the TV because I was blinded by rage at the time. I have since calmed down and am completely aware of what a first-world problem this is. ]]> https://www.earthli.com/news/view_article.php?id=3168 https://www.earthli.com/news/view_article.php?id=3168 Tue, 19 Jan 2016 22:51:04 +0100 https://www.earthli.com/news/view_article.php?id=3131 https://www.earthli.com/news/view_article.php?id=3131 Sun, 17 May 2015 21:43:38 +0200 . I figured I would take a few screenshots and explain exactly what I am trying to do with YouTube and why it feels so awkward. [Use Case] The user wants to watch vides in a list that he has not yet watched. [image] It is not immediately obvious how or even if the user can mark a video as "unwatched" so that the little sash is no longer shown across the video in a list. As it stands, the sash is pretty much useless because the video almost always autoplays before the user can click "watch later". [Use Case] The user would like to manipulate multiple videos in the list at once. [image] Also, the lists are really sensitive to clicks and default to launching a video with every missed pixel -- which marks the video as "watched" (see above). [image] In contrast, GrooveShark [1] has relatively intuitive support -- nothing fancy -- for manipulating multiple media items. Clicking the song selects it by default, rather than playing it. Only a click on the play button at the front of the row actually plays the song. [image] GrooveShark also has the notion of a "queue", which is a kind of ad-hoc list to which media items are added for playing. Food for thought. [Use Case] The user has already-watched videos in a list and wishes to upvote/downvote a video. [image] Rating multiple videos at once, up or down, would complete the UX. [Use Case] The user would like to move or copy a video to another list from the list view. [image] This is currently only possible from the video player, which necessitates playing the video (again) and jumping back and forth between the list view and the player. Here's what moving a single song looks like in GrooveShark. [image] [Use Case] The user has already watched videos in a list and wishes to upvote/downvote or move or copy the video to another list. There is no good way to do this from the list. Instead, the user has to navigate to the video, auto-playing it and clicking the "Add" dropdown multiple times until the video has been added to the new list and removed from the "Watch later" list. [Use Case] The user is watching the videos in a list and wishes to organize them as he watches subsequent videos in the list. [image] In order to add a video to another list (e.g. "favorite Comedy" or "Suggestions for wife"), the user must click that video to start it again or open the list in another window. None of these options are as convenient as just making list commands available from the video player, so the user is not forced to leave the context of the currently playing video. [Use Case] The user wants to move or copy a video to another list. [image] The dropdown gets the job done, but it's not a pleasant user experience. Instead, to move a video, the user must click multiple times, instead of just twice (to remove the video from the current list and to add it to the other list). [Use Case] The user wants to, well, do anything but watch videos in the YouTube app for Samsung SmartTVs. Some stuff that would be nice: * Upvote/downvote [2] * Add to "watch later" / build an ad-hoc queue of videos to watch * Move/copy video to list The range of functionality doesn't have to be as wide as for the desktop-browser application, but basic commands like upvote, downvote or watch later/add to list should easily be possible, even given the limited input of a TV remote control. [Use Case] The user wants to find a video in a longer list on the Samsung SmartTV YouTube app. The YouTube app doesn't make it very easy to find a video either. The user can only move forward in the list, but cannot wrap around to the end of the list from the beginning or vice/versa. This is really tedious when you want to watch a movie that you just added to the end of a longer list. Some way of filtering would be most welcome, but being able to cycle backwards would be very useful for getting to the most recent content. -------------------------------------------------------------------------------- [1] And also Google Play, which I've recently discovered has quite a good UX for multiple-object selection and manipulation. [1] Edit, April 2016: This feature is now available on Samsung's SmartTV app. You have to be quick to navigate to it before you jump to the next video, but it's there. ]]> https://www.earthli.com/news/view_article.php?id=3120 https://www.earthli.com/news/view_article.php?id=3120 Sun, 01 Mar 2015 22:41:18 +0100 where he'd found a link about "Destroying your hard drive is the only way to stop this super-advanced malware" . The article about viruses is a bit hyperbolic but mostly legit. The original web site, though, has some really interesting stuff on it. It's actually not too poorly laid-out -- "Cymax Media" made it and their own homepage isn't too terrible -- but the emphasis is hard to parse. What's more important than the news links that the site ostensibly publishes? * Precious metals * Giants * Ebola and Diseases * Zombies * Scripture * The site's author's latest book, called "Little Creatures" (elves, imps, fairies, gnomes, dwarves, demons, etc.) * The Shinar Directive (the "greatest conspiracy theory of all time") * More giants Finally, below all of this other stuff, are the news links, with no explanation or elucidation, so you have to click through on each one that sounds interesting and probably load up a whole other page about giants. Still, the Geocities web sites of 2015 are decidedly better-looking than their predecessors. Sure, the black background is not very easy on the eyes and sure there seems to be a lot of distracting stuff on the page, but I have a feeling that the site works as designed: it reflects the intent of the author. Giants, man. Keep your eyes peeled. ]]> https://www.earthli.com/news/view_article.php?id=3023 https://www.earthli.com/news/view_article.php?id=3023 Thu, 07 Aug 2014 22:48:27 +0200 was forwarded to me purportedly for its content. That content? They closed an entire airport for a bomb hoax. But something else caught my eye: the sheer impenetrability of the presentation. I took a screenshot of the whole article, shown to the right. Can you tell where the article is hiding? I'm going to ignore the British news-authoring penchant for crash blossoms. [1] Also, I'm going to assume that using "section" as a verb that means "commit to confinement for mental instability" is something that the British news-reading public understands. What fascinates me is that a news site has chosen a layout that's almost deliberately difficult to read. It's so confusing that it's hard to determine that information as to what actually happened is almost completely missing. I'm going to set aside the by-now age-old complaint that the sidebar and giant article footer include so much extra information about other stuff. Instead, I'm just going to be happy that there are no ads for busty Russian brides in my screenshot and focus on the presentation in the article itself. There is almost no information in the article. I've summed it up below: * Guy made bomb hoax * Plane was escorted by RAF * Airport was closed * Guy was "sectioned" (presumably they mean committed to a mental institution rather than chopped into little pieces) * Other passengers were either oblivious or inconvenienced * Plane arrived early I didn't count the half of the article that consisted of irrelevant statements from passengers. I gleaned this information in a couple of re-readings. This is not because my grasp of the English language is shaky, but because the ordering of information was so strange. The editors of the BBC don't trust their readers to be able to read more than a single sentence at a time. And they didn't trust themselves to present more than four or five of these so-called paragraphs without throwing in an utterly unhelpful graphic. In order, the graphics are: 1. Picture of a fighter jet in air; purportedly taken from the plane. Oooh, how exciting. It's like we're on the plane. The photo differs in no way from a stock photo of same. 2. A montage of where Manchester is in England, stating in no uncertain terms what the BBC considers its readers' grasp of geography to be, A picture of where Doha is relative to Manchester, also very, very useful in learning about what happened and, finally, a stock photo of an RAF jet, as if the picture above wasn't clear enough that the RAF had scrambled a jet. 3. Next up was yet another picture of the airliner accompanied by its staunch companion, the scrambled RAF jet. A Typhoon, if you haven't been paying attention. 4. And, finally, we have a picture of the jet on the ground, with lots of colorful little emergency vehicles in front of it, accompanied by a caption that has nothing to do with the picture, "Nine incoming flights were diverted to other airports". If you're like me, the article doubtless left you wishing for more information, like: * How did the man make the threat? * What kind of threat was it? * Why was he considered mental rather than a terrorist? Because he's white? Non-Muslim? * Why did they scramble a jet and shut down an airport and then not render him to Guantánamo? General lightness of skin tone? Lack of beard? Oops, same question as the previous one. These are burning questions that the BBC is happy to let you feel might be answered in any of its other fascinating-sounding and doubtfully information-saturated articles, like: * Military jet escorts passenger plane * Reaction to airport alert * Hoax bomb suspect 'non-descript' (video) * Plane passenger films jet escort (video) * RAF jet filmed escorting plane (video) ...all published on the same day (before 09:00) and three of which are videos, so as not to strain your brain with too many more words. I deliberately didn't link any of them in order to be complicit in wasting more of your time. -------------------------------------------------------------------------------- [1] "Crash Blossoms" are an oft-discussed topic on the "Language Log" , a more recent example of which was "Dutch military plane carrying bodies from Malaysia Airlines Flight 17 crash lands in Eindhoven.". ]]> https://www.earthli.com/news/view_article.php?id=2412 https://www.earthli.com/news/view_article.php?id=2412 Sun, 20 Jun 2010 13:36:29 +0200 or "3QuarksDaily" both use the same title for all pages. This is a huge pain in the neck if you have multiple pages from those sites open in a browser. It would be much more useful (for bookmarking, etc.) if the page title included the title of the primary content on the page. For example, instead of simply using Glenn Greenwald - Salon.com for every page, a unique title that gave a hint to the contents Follow-up on the Citizens United case - Glenn Greenwald - Salon.com would be much better. Sites can feel free, of course, to limit the number of characters of the post's title to use in order to retain the section (Glenn Greenwald) and site (Salon.com) when creating bookmarks. For example, Follow-up ... Citizens United case - Glenn Greenwald - Salon.com or Follow-up on the Citizens... - Glenn Greenwald - Salon.com would both be much more user- and SOE-friendly. ]]> https://www.earthli.com/news/view_article.php?id=2345 https://www.earthli.com/news/view_article.php?id=2345 Wed, 10 Mar 2010 22:47:51 +0100 on ABC News was almost completely overshadowed by a layout dominated by advertisements for other products also available from ABC. Anyone happy to read content for free online should also be prepared for a shameless onslaught of self-promotion, but does it have to be so ugly? The page is broken into dozens of blocks (listed below), which seem to only coincidentally line up or share a common style. Take into account that most of the blocks are independently animated and the overall effect is dizzying. As you can see from the screenshot, the article ends up split into four nearly independent blocks on the page -- and is then split into four similarly delightful pages. As with most online articles, the "printable version" is a safe refuge. Or you can use the "Readability" bookmarklet to clean things up. [List of page blocks] * Banner ad * Site banner (with search controls & some vestigial top-level menus like "ABC" & "ESPN") * Menu bar (pretty comprehensive, though with a few "main" links added to The end of it, like "Good Morning America") * Other articles in this section (represented as a thin, horizontal bar and flying in the face of all design and usability trends) * Finally, the article itself * Then a toolbar for the article (sharing, print, email, etc.) * A block containing more related links (with thumbnails!) cutting the article off * The article continues * Floated in on the left is a block with "Sponsored links" * A comments area * Another block below that with "More Coverage" * A Web 2.0-style footer with most of the menu repeated in static "fat footer" form * Dominating the right-hand side are several blocks: * One with even more related links, this time videos * Yet another ad for "Good Morning America" -- which smacks of desperation * Another block with more links from this section * A block with completely unrelated slideshows * Another sharing (e.g. Facebook) block (as if the article toolbar above wasn't enough) * A block of "Most popular" links * ESPN Headlines * A Digg applet showing "Most Dugg Stories on ABC News" * Some advertisements * More "sponsored links" Sweet Lord! Almost maximum redundancy achieved. I didn't even have the heart to try to validate the page. Talk about a page designed by comittee. ]]> https://www.earthli.com/news/view_article.php?id=1489 https://www.earthli.com/news/view_article.php?id=1489 Mon, 11 Dec 2006 21:07:08 +0100 is a really interesting, stripped-down, fast social bookmarking site; while it doesn't have the CSS/Web 2.0 props of "Magnolia" or "Digg" , neither does it have the excruciating wait time or incredibly heavy page load (both are easily over 250KB home pages). Reddit weighs in at under 50KB and has sensible caching commands, so the browser isn't constantly following some insipid order to check for new content every time you click something. It's style is very spartan, but conveys all the information you need to know. Functions are designated with simple text, instead of icons; ratings are marked instantly and sent to the server with AJAX. All story and comment ratings, as well as which links you've already checked out, are stored online. Under each story, you can also click "save" to store it in your favorites list. [1] The simple up/down rating system is perfectly executed as in-place AJAX because it means you're far more likely to vote on things like comments because it's so easy to give points to clever users and take them away from jackasses. Each view can be sorted by bookmark rank, "hotness" (rate of change) or simple date order. Comments are also just as easy to make, with the editor appearing in-place (though a preview function would be quite welcome). All-in-all though, an eminently usable and useful site. -------------------------------------------------------------------------------- [1] Check out my own "my profile" at Reddit, if you like. ]]> https://www.earthli.com/news/view_article.php?id=1482 https://www.earthli.com/news/view_article.php?id=1482 Sat, 09 Dec 2006 16:41:53 +0100 offers a unique Flash experience: its navigation is quite nice. The stark and simple silhouettes are mostly static, but some small pieces move: the fish swim around, clicking the finger makes ripples on the pond, the butterflies flutter. Combined with the music, it's quite pleasant to look around, including the cryptic navigation links -- for those not versed in whichever language they're written in -- and the horizontal scrolling. It's well worth a visit. ]]> https://www.earthli.com/news/view_article.php?id=1414 https://www.earthli.com/news/view_article.php?id=1414 Thu, 26 Oct 2006 20:34:26 +0200 home page, it's hard to say who's stealing from who here. Firefox went with the darker silhouette, while Opera opted for the "girl of indeterminate age". Both have the big, green download button (a good idea, drawing the eye to it), but Opera has nicer product layouts, with big, Apple-y graphics. Digging further into the site reveals a clean, white/light silver layout now consistently used throughout all areas of the site (which is also considerably bigger than Firefox's site). Notably, they've finally settled on a single, coherent system of icons for their products and sprinkled them liberally throughout the site, to act as way-finders for the different features. [1] As with Firefox's site, Opera's previous approaches to rolling out a new site have been a bit slapdash, with the user quickly discovering areas that were still using older themes. Now, with the exception of the community pages, the more open and whitespace-friendly look is everywhere. -------------------------------------------------------------------------------- [1] As an aside, Opera's feature set is just fantastic. Developer tools are still conspicuously absent, but otherwise everything's integrated. Features like ad-blocking are superior to anything else out there and there's none of the "shopping for extensions" you have in Firefox. ]]> https://www.earthli.com/news/view_article.php?id=1413 https://www.earthli.com/news/view_article.php?id=1413 Wed, 25 Oct 2006 23:12:10 +0200 seems to have finally hit a nice, open, clean style. The download button is huge and green and inviting. The background graphic is confined to the product area (not in the header or footer, reserved for "corporate" use) and adds to the fun feel. Overall, it's airy, making good use of white space and all text is well-aligned (bullet titles aligned with descriptions ... yay!). Even the footer got alignment attention, offering an unobtrusive language chooser, which includes an impressive array of languages. On top is the company toolbar, making use of more corporate navy/graphite tones and extremely subtle gradient shading; you can't see it here, but the hover effect is subdued and sophisticated as well. Even the awards are nicely aligned on the right and don't stick out like big, cheesy sore thumb (though the font below them is unreadable). And, most importantly, the redesign affects more than a single page this time! It extends to all support, add-ons and product pages and even the new "about" section. Now if they could only ditch the "shout-out" on their main page. ]]> https://www.earthli.com/news/view_article.php?id=1309 https://www.earthli.com/news/view_article.php?id=1309 Sat, 10 Jun 2006 00:28:57 +0200 doesn't look especially amazing, but it has quite a few neat tricks that make it a very nice web application. It allows you to select multiple Wikis and compare them; this is a comparison of "MediaWiki vs. Moin Moin" . The chart is very nicely laid out and includes custom tooltips and a nice hover effect allowing you to follow along and compare many wikis at once. There is also the flagged feature on the left that makes it easier to show only the features that are interesting (it would be nice if the print view were a little better. All-in-all a nice, clean implementation of a relatively simple database lookup. It provides a single service and provides it well. ]]> https://www.earthli.com/news/view_article.php?id=1310 https://www.earthli.com/news/view_article.php?id=1310 Sat, 10 Jun 2006 00:08:32 +0200 is a web application for wine afficionados. Users build add to the global wine database, create lists of their reserves, their favorites and their buddies. It's a classic web 2.0 collaborative social web site by Dan Benjamin (of "HiveLogic" and "A List Apart" ) and Dan Cederholm (of "SimpleBits" ). The colors evoke a bottle of red, and the simple decorations, like the filigrees used a separators provide a dash of style. The colors and graphics are flat and simple (it's the web! 2.0! get it?) and give a fun and inviting feel to it. The lists are simple and elegant and use very subtle color gradations to convey form and function. The subtle2 gradients are typical of Cederholm's designs. There's also a lot of white-space on this page, which makes it feel so uncrowded even though it contains 4 separate areas (sign up, now playing, lists and sidebar), 6 lists and 4 forms (sign up, search and log in). ]]> https://www.earthli.com/news/view_article.php?id=1223 https://www.earthli.com/news/view_article.php?id=1223 Sun, 05 Feb 2006 22:48:17 +0100 ]]> https://www.earthli.com/news/view_article.php?id=1196 https://www.earthli.com/news/view_article.php?id=1196 Thu, 01 Dec 2005 21:07:22 +0100 https://www.earthli.com/news/view_article.php?id=1192 https://www.earthli.com/news/view_article.php?id=1192 Sun, 30 Oct 2005 10:13:47 +0100 , which also looks quite nice and functional. The product page for Trac is clean, presents the simple logo, a description of the product and a prominent download button. ("Edgewall Home Page" ) ]]> https://www.earthli.com/news/view_article.php?id=1185 https://www.earthli.com/news/view_article.php?id=1185 Thu, 13 Oct 2005 22:05:21 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1182 https://www.earthli.com/news/view_article.php?id=1182 Thu, 06 Oct 2005 13:10:01 +0200 is a web applications company with a suite of applications for small businesses. Their home page is a nice mix of browns and oranges; the menu side-bar has an especially clean feel to it. The purchase page looks good too, with a large "SALE" sticker in the upper left that seizes your attention. Excellent use of advanced styling for the links and callout boxes. ("Joyent Home Page" ) ]]> https://www.earthli.com/news/view_article.php?id=1181 https://www.earthli.com/news/view_article.php?id=1181 Sun, 25 Sep 2005 15:13:08 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1180 https://www.earthli.com/news/view_article.php?id=1180 Sun, 25 Sep 2005 15:08:50 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1179 https://www.earthli.com/news/view_article.php?id=1179 Sun, 25 Sep 2005 15:07:02 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1178 https://www.earthli.com/news/view_article.php?id=1178 Sun, 25 Sep 2005 15:04:49 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1177 https://www.earthli.com/news/view_article.php?id=1177 Sun, 25 Sep 2005 15:03:16 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1176 https://www.earthli.com/news/view_article.php?id=1176 Sun, 25 Sep 2005 15:01:06 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1175 https://www.earthli.com/news/view_article.php?id=1175 Sun, 25 Sep 2005 14:59:56 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1174 https://www.earthli.com/news/view_article.php?id=1174 Sun, 25 Sep 2005 14:57:57 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1173 https://www.earthli.com/news/view_article.php?id=1173 Sun, 25 Sep 2005 14:55:08 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1172 https://www.earthli.com/news/view_article.php?id=1172 Sun, 25 Sep 2005 14:52:17 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1171 https://www.earthli.com/news/view_article.php?id=1171 Sun, 25 Sep 2005 14:48:32 +0200 and "Steam News" ) ]]> https://www.earthli.com/news/view_article.php?id=1170 https://www.earthli.com/news/view_article.php?id=1170 Sun, 25 Sep 2005 14:45:56 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1169 https://www.earthli.com/news/view_article.php?id=1169 Sun, 25 Sep 2005 14:42:49 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1168 https://www.earthli.com/news/view_article.php?id=1168 Sun, 25 Sep 2005 14:40:19 +0200 . They have a very similar layout, but more boxy (though the headers for the boxes are nice). ("Inside Mac Games Home Page" ) ]]> https://www.earthli.com/news/view_article.php?id=1167 https://www.earthli.com/news/view_article.php?id=1167 Sun, 25 Sep 2005 11:25:02 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1166 https://www.earthli.com/news/view_article.php?id=1166 Sun, 25 Sep 2005 11:23:24 +0200 site is a good example of this cool control in use. It uses accelerating/decelerating animation and opacity progression to show/hide menus. Very slick ... and it's cross-browser. ("Dynarch Navbar Home Page" ) ]]> https://www.earthli.com/news/view_article.php?id=1165 https://www.earthli.com/news/view_article.php?id=1165 Sun, 25 Sep 2005 11:21:49 +0200 ) ]]> https://www.earthli.com/news/view_article.php?id=1164 https://www.earthli.com/news/view_article.php?id=1164 Sun, 25 Sep 2005 11:08:13 +0200 ) ]]>