Monica

I don't know a lot about the nuts and bolts of responsive design (the "how", I mean), but Stack Exchange is moving toward it so I'm starting to pay attention.

Meanwhile, my ancient tablet seems to be in its death throes, so I've started to look around at what's out there these days, and I realized something. I'm looking at some 10" tablets with resolutions like 2048x1536. My 30-inch monitor at work is something like 2500px wide. These are, of course, not even remotely the same size pixels. Pixels have always varied with the size of the monitor, of course, but a ~10" tablet used to be in the range of 1024 or 1280 wide (landscape), not twice that.

I've seen discussions of SE's upcoming responsive design that say things like "and at widths under 900px it does this" and "the max width for the content area is (some number of pixels)".

How does this work? How can I see reasonable "real-world" sizing of things on both my big monitor and my tablet when designers are measuring things in pixels and tablets are doing crazy-dense things with pixels these days? I guess the same can be said of 4k displays (which I don't have). Do these ultra-dense devices somehow tell the browser "no, really, treat me as half that for layout purposes"? On a tablet will I need to have tons of zoom -- but still struggle to see the actual application's controls, because those don't zoom when you make content bigger?

I must be missing something obvious. Anybody want to enlighten me?

A few weeks ago I wrote about a Stack Exchange design change that made the site much harder for me to use. I wrote a post about it that got a lot of attention -- which led to a meeting invitation from the relevant product manager. We had a very productive conversation, after which they fixed the main problems I reported (and one that came up during our meeting). Woot! Calm-but-firm user feedback works sometimes.

The meeting was supposed to include one of the designers, but time zones are hard. The product manager and I spent the better part of an hour talking about the design, use cases, the need for responsive design, vision problems, and so on. Through screen-sharing, I showed him what things were problems for me, what I was using user scripts or CSS overrides to get around (but I can't do that on my tablet), what I was just having to put up with, and what site functions I was just ignoring because they're too hard now. While it's not about the top bar (the specific UI change that led to this meeting), I pointed out a problem that basically means I can't do some key moderation tasks on any mobile device. (No word yet on whether they're going to fix that.) Along the way we bumped into a couple things where, apparently, normal people see some color differentiation that I couldn't see, and he said they'd work on that. He shared some of their then-future plans for the top bar and asked for feedback. He said they are trying to move to responsive design, which will make a lot of things better, but we both know that's a big change for a site that wasn't designed that way from the start.

This UI change has been quite contentious among the larger user community. Some users are, sadly, being quite rude about it. I'm glad that, against that backdrop, someone was willing to take the time to try to understand and address the problems I was facing with the new design. I'm one of about 15 million users and about 500 moderators, and nonetheless I was worth a few hours of somebody's time. Courtesy of course matters, but even with courtesy I'm usually brushed off, not engaged, when part of a large user base somewhere.

This is actually my fourth^* significant meeting (not email, not site chat, but synchronous meeting) with SE employees -- two community managers, one VP (escalating a problem), and now this product manager. All have left me feeling that the employees in question really cared about me as a user and moderator, and most of them resulted in my problems being fixed. I'm pretty impressed.

^* I was also interviewed by a member of the design team for the now-ended Documentation product, I think because of this post I wrote about some planned changes there. That was them doing user research (for which they paid me), not me bringing something to them. And I once interviewed for a job there, but that's different.

I spend a lot of time on, and am a volunteer moderator for, several Stack Exchange sites. (Mi Yodeya is one of them.) SE has a banner ("top bar") that is the same across all sites. It contains notifications, information about the logged-in user, and some key navigation links. For moderators it contains a few more things relevant to that job.

Until recently it looked like this (non-moderator view):

The red counter is the inbox (waiting messages) and the green one is reputation changes. If there aren't any, you just get the gray icons that those alerts are positioned over. If I were a moderator on that site, there'd be a diamond to the left of my user picture and a blue square with the flag count to the left of that.

They've just changed this design. (Well, the change is rolling out.) Here's what it looks like now (for a moderator):

The most important links for moderation are the last two things, the diamond and the blue box with the number (flags). They're on the far right, where they're less likely to be seen for various reasons. (Non-moderators don't get those indicators.)

In the old design, those moderator indicators -- which are important -- were toward the center where they're easier to see. Also, all the numbers were a little bigger and easier to see.

When this was announced there was a lot of immediate discussion in the moderators-only chat room, during which I got a little upset about the reduced usability, especially those moderator controls -- which had a good chance of being scrolled away in a not-huge browser window, because SE doesn't use responsive design. After I calmed down I wrote a post on Meta about how this was going to make it harder for me to do my volunteer job, particularly with vision challenges. I expected to get a few sympathy votes, some "get a bigger monitor" snark (which wouldn't help, by the way), and no results.

That post is now one of my highest-scoring posts on the network. And I have a meeting with the product manager and a designer at SE next week to demonstrate my difficulties in using this in more detail.

Meanwhile, I've gotten some help with userscripts from some other moderators. It's hacky and a little buggy and it slows down page loads and I have no idea how to adjust some things, but at least I can see my notifications and the moderator stuff is in a better place. It'll do for now.

I sure hope I can get them to bake some of this in, though. The page-load delay is a little disconcerting as stuff jumps around on the screen. (Also, userscripts do not work on my Android tablet.)

Beyond the immediate problem, though, what I really hope for is to find some way to raise a little awareness that usability is hard, designers are not the users, there are all kinds of people with all kinds of usage patterns and constraints, and you need to somehow, systematically, figure out how to design for the larger audience. That's going to be the hard part.

Today I used Uber for the first time (aside from a shared ride a couple months ago that someone else booked). It wasn't mainly because of the better price, though that's nice too. And it wasn't mainly out of objection to the monopolistic protection racket that runs transit in my city, though yeah, that too. It was mainly because of UX.

Here's how things go with Yellow Cab:

• Attempt to make online reservation. After completing all fields, get told that online reservation is not possible and I need to call. Every. Single. Time.
  
• Call, wait on hold for too long, and eventually make reservation with brusque or disinterested agent.
  
• Usually but not always, cab shows up. If it's going to be a no-show, you won't know until it's too late.
  
• Get bombarded by video ads in the cab until I figure out how to make it stop, which is hard because the LCD touch-screen is at a bad angle so I can't see the buttons well.
  
• Pay using that same bad touch-screen. I seem to be incapable of seeing the UI for specifying a tip amount without opening the car door and half-lying on the seat. Buttons for 20% and 25% are easy to access, presumably by design.
  

So I got disgusted enough to try the competition. You can't make a reservation, which concerned me a bit, but I checked the app earlier than I needed to leave, saw multiple cars within a couple miles, and relaxed. When I was about ready to book, the app told me we were in a higher-price (prime time) period that would end in two minutes. So I waited. When I called for one it took no more than five minutes. I could watch the driver's progress on a map.

The driver was fine and the car was clean -- that and punctuality are really all I require.

Payment was simple, through the app, with an emailed receipt. The trip cost about 65% of what the last cab trip on the same route cost.

Yellow Cab's user experience is terrible. Uber's is good. I know which one will get my business next time.

I do have to ding Uber on one thing, though. When the driver heard that this was my first time using them he gave me a promo code for a significant discount. I tried to enter it during the ride and the app said I couldn't use it on an in-progress trip. Fine. But later I tried to enter it for future use and the app said it was only good for a first-time ride. So... if it's not available until it's too late, what's the point? If the driver had never given it to me I wouldn't have noticed the lack, but because he did I feel Uber goofed here.

It used to be that if you put out a software product, and particularly as you produced new versions of it, people might complain about things that were hard or different (change bad!) or broke their workflow, and you'd decide whether to add some configuration parameters or redesign it again or just tell them to suck it up. There wasn't much they could do within the scope of your software if you didn't give them hooks. (They could, of course, take their business elsewhere if your breaking change was important.)

Then, if what you were developing was a web site, you had to cope with some variations ("IE did what to our site?"), but you still had a lot of control. Well, until browser add-ons became a thing, and people could block your ads and trackers and make you use HTTPS and your site had better still work if you didn't want people to surf away.

Now, quite aside from the multitude of browser add-ons that might be relevant, we have tools like Greasemonkey and Stylish that empower users to rewrite your site to their heart's content. For some of us this lets us turn unusable sites into usable ones ("you chose what font? and assumed I had a 1500px-wide browser? feh!"). But it goes beyond that; Greasemonkey, by allowing JavaScript injection, lets us add, remove, and redefine functionality. I have several Greasemonkey scripts for Stack Exchange that make those sites easier for me to use and moderate, scripts that let me add shortcuts and override assumptions the designers made that don't quite fit my circumstances. I like SE's designers and, mostly, the designs of the sites I use, but some things just don't work so well for me out of the box. I'm not picking on SE; I think this happens with lots of sites.

All of this got me wondering: how do you develop web UIs in that kind of world? Are there some best practices that designers use to say "ok, if you're going to hook into the site and change things, we'll make it easy for you to hook in here and here to try to guide and contain you"? Is there some way of doing defensive design, so that if people do add scripting they can reduce the chances that that'll break something important? Or do they mostly just not worry about this, figuring that the Greasemonkey heads know how to use the browser console and will reverse-engineer their pages and, anyway, if you're going to mess with our site it's ok to say you're on your own? (I don't actually know enough to write those Greasemonkey scripts myself; I use scripts that others have written. So I don't have a good perspective coming from the developer-user side here.)

I'm curious about how the expansion of user-driven variation, on top of the browser-driven variation we already had, is affecting the field.

Going to the eye-doctor and having my pupils dilated seems to cause the day to become bright and sunny. But this is Pittsburgh, where sunny days are relatively uncommon. Does this mean that most people in Pittsburgh never have their eyes checked this way, or are we all mysteriously choosing the same few days for this?

I posted the preceding on the "great unanswered questions" page on our wiki at work. In keeping with the name, I've received no answers.

Why does Windows 8 hide the control to shut down the computer? The discussion in the (currently-)top-voted answer makes a good deal of sense. And I actually didn't know that it's now considered safe to just turn a running computer off; decades of "don't do that" have trained me not to.

Back in July 530nm330hz posted a review of a new book of lessons from the talmud, specifically tractrate B'rachot (blessings). Based on that review I recently bought the book and I'm quite enjoying it so far. It's organized by talmudic page, so I first jumped to the entries on particular pages that I know and love -- how does God pray, different themes of concluding blessings, the tussle over leadership where they deposed Rabban Gamliel (I previously wrote about that one), and one or two others. Now I'll go back and read the rest. I hope this book is the first in a series.

I forget where I came across this special "de-motivator" image, but why should I keep all the fun to myself? (Image behind cut.) ( Read more... )

Dear brain trust,

I have some vision-related problems with my computer setup at work and our IT and HR departments are ill-equipped to help. I've got a configuration -- a combination of OS settings (Windows), monitor settings, application settings, and lighting -- that kind-of sort-of works, but it's all stuff I figured out on my own. There may be better ways to solve my problems, and some of my problems are currently unsolved and getting in my way. Meanwhile, IT really wants to push me to newer versions that seem to be worse for me.

I would like to find a consultant who is knowledgable in both vision stuff and tech stuff, someone who can sit with me for a few hours and give me informed advice about changes to make. My ophthalmologist of course knows the vision stuff but is not a techie; the techies I know don't grok the vision stuff. I need to find someone who can hear "photo-sensitive" and "restricted focal distance" and "astigmatism" and the rest, understand what that means, and suggest approaches that have not occurred to me from walking the application menus and Windows control panel and Firefox extensions. Technical areas will include the gamut of Windows display settings including custom color themes, CSS overrides in Firefox, configuration of Office and (if possible) Adobe reader, and monitor settings, among things. (Bonus points if this person can make Eclipse suck less.) Once I find this person, I intend to push my employer to hire that person for a consultation. I don't expect to have to push very hard, but I also don't expect to get multiple chances on the corporate dime.

The problem is I haven't been able to find that person. My Google searches have turned up many many consultants who will help employers comply with the Americans with Disabilities Act -- they're compliance people, not usability people. (Also, most of them are about mobility issues.) And I've found folks who will build you accessible web sites (they say). This does not help. Clearly I'm going about this wrong.

So, dear brain trust, can you help me figure out how to search for help with this? And in the "hey, I might get lucky" department, do you, dear reader, know someone who could provide this service in Pittsburgh?

A couple weeks ago at work we got our first look at the new version of Bugzilla, which we'll be forced to upgrade to soon. (Our current version is incompatable with the version of Perforce we're upgrading to.) Both Perforce and Bugzilla have web interfaces, and in the new versions, both assume a much wider browswer window than I am prepared to provide. That I have to jack up the font size doesn't help, but, fundamentally, people are, more and more, designing inaccessible web sites on the theory that of course you can spare 1000+ pixels in width. The web-design industry is mature enough (or at least old enough) that we should be past that... grumble. But I digress.

So, while talking with my manager about some of the things we were trying to do to address this (our build manager, in whose lap all this falls, has been wonderfully helpful), my manager said "I just ordered some new 22" monitors; I'll put you on the list". (I could, if I like, have a pair of 18?" monitors, but I can't actually place two monitors such that I can see everything.)

This morning the monitor fairy came. :-) 22" turns out to be widescreen (not the 4:3 or whatever of regular monitors); the new one might be half an inch shorter than my old one. But it's tall enough, and the extra real-estate is nice. The recommended resolution is only 1680x1050 (or something like that), which surprised me. (I expected to see a number over 2000 for the wide dimension.) That resolution actually works for me; yay! This was also the highest setting available on my computer; I assume that's a function of the graphics card and not the monitor. (I would not be able to put higher resolution to good use.)

One problem: I noticed some pretty significant color distortion in the top quarter of the screen. We actually thought it was defective, so we swapped it out for another one (slightly different model). The problem was less pronounced on the second one but still there. That's when I noticed that it changed with my height; if I raised my chair a couple inches the problem got much better. But I can't raise my chair a couple inches because then the keyboard will be in the wrong place. (Tried it for an hour. No.) If I could tip the monitor forward a little that would make a difference, but it's already at the max setting there. Perhaps I will channel my inner MacGyver and rig something to let it tip a bit without falling. (Ok, that's more like my inner MacGyver's four-year-old apprentice or something. MacGyver would rig it to track my eyes and auto-pivot in both dimensions, using nothing more than duct tape and pocket lint.)

Mind, I will find ways to live with the color distortion if necessary. The real estate is worth it. It's not a perfect solution; I have to roll my chair sideways a bit to fully utilize the screen. But it's pretty good, and if it just plain gives me the room to have some extra-wide windows that I can move around as needed, that'll do.

I failed to record my monitor customizations before removing the old one, so I was recreating color depth, brightness, etc by feel today, but I thought I'd written this down somewhere and, sure enough, I did. So I'll try those settings tomorrow (they're somewhat different from what I came up with today) and see how that affects my color distortion.

One other problem (handily solved): the first monitor did not have buttons but rather touch controls. With tiny little labels that are impossible to read in dim lighting. I had to borrow a flashlight and use my magnifying glass to configure the monitor. The second one (an older model) has buttons. Yeah, I'll keep that one. What was Samsung thinking? Touch controls?! (And finicky ones, too.)

Yesterday the "low tire pressure" light on my car came on. (I've never had a "low tire pressure" light before.) The tire gauge didn't show anything to be concerned about and the light went off again after a couple miles, so I'm not sure what that was about. (It was not the coldest recent day, at least at the time it happened.) But there was a fundamental flaw in the UI: it didn't tell me which tire it suspected, so I had to check all of them. Given that they've obviously got sensors in each tire, how much harder would it have been to transmit that information and add four little dots or something to the light, lighting the ones(s) where problems were detected? (Hey Honda, if you do this, position them intelligently -- don't follow the bad design of the burner knobs on many stoves.)

On my previous car, you move the lever up to turn on the wipers and down for a single pass. On my current car it's the reverse. That's taking some getting used to. Neither is obviously better; I wish the industry would just choose one.

Another in the "it's not just about you, mister designer" class: every microwave oven I've ever used has a numeric keypad, with "start" and "stop" buttons to either side of the "0". On the microwave at home, "start" is on the right. At work, it's on the left. As a result I get this wrong about one time in five. (It's not as if I -- or most users, I suspect -- actually read the button; we use positional memory, which works for numbers and fails for start/stop.) People change microwaves more often than they change cars, I suspect, so it would be nice if the industry would settle on a standard. Either one would be fine if it were predictable.

Yet another reason that I would leave (or decline) a job that requires substantial Word usage: accessibility.

In my experience, MS Office utterly fails when it comes to accessibility issues. (Or if it doesn't and there are work-arounds, I sure can't find them in the documentation -- which is a different type of failure.) Today's problem: highlighting. When you use the highlighter in Word, it hard-wires whatever color you chose into the document (bright yellow, by default). That's illegible to someone using reverse-video, and there's no way to globally change it in a document. The correct way to do this sort of thing is to have semantic concepts like "highligher color" (1, 2, 3...), and embed that into the Word doc. Then, on the client end, you define your color map. Voila -- everything works. It'd be like system colors, except they'd work. You get your yellow; I get dark blue. For extra points, use the system settings directly for as much as possible; "selection color" probably works fine for highlighting, for instance.

It's not just highlighting in Word; Outlook pays attention to your system colors for some things but not others, so there are things in the UI I just can't see. (I'm told there's supposed to be a status line that tells me about my server connection; could've fooled me.) I frequently get Office documents where some accident changed "automatic color" to black, and I have to select everything and change it back.

This problem is not unique to Office; Microsoft's IM client does the same thing with text color. Your outgoing messages have a hard-wired text color, which might or might not work for the recipient. I have to highlight most coworkers' messaages to read them (they come in as black on my dark background), and they have to do the same for mine (which are white so I can see them as I type). Text color should be set for a user, not for outgoing messages. I want to see everything in white; you want to see everything in black. Half of our conversation shouldn't be wrong for each of us.

These products, like many web sites, tend to specify half of the foreground/background-color pair. If you're going to hard-wire yellow highlighting, you'd better also hard-wire black text. If you're going to hard-wire black IM text, you'd better also hard-wire a light background. But you shouldn't hard-wire either most of the time; you should ask the OS.

MS offers accessibility options in Windows, but it's a sham -- try to use them and you'll bump into stuff like this all the time. Theirs aren't the only products with these problems, but they are the ones who have no excuse for getting this wrong.

I don't really think of myself as a Phillistine (culturally speaking), but I think my views on art and function are more conservative than those of some of the people around me.

When they redesigned US paper money a few years back, a lot of people thought the results were much prettier than before. But usability for me went way down, because I found the font they used for the numbers on the front to be illegible, and I could no longer tell whether I was holding a 10 or a 20 without looking at the back. This is a nuisance when digging through a wallet. And I can't believe that it wasn't at least a little harder even for people with good vision. So to me the new peach 20s are a major improvement, at least for now. We'll see what happens when they do the 10s.

I've heard some people critique the new peach bills in various ways, liking the treatment of the background or disliking some aspect of the portrait or the like. And I'm sure the government spent an amount several times my annual income on the artistic aspects of the bill (as opposed to the anti-counterfeiting aspects). But c'mon, it's just money! I'd rather have pretty money than ugly money all other things being equal, but I really don't care. Its job is to live in my wallet until I want to exchange it for goods or services. And as soon as the art gets in the way of that function, I get annoyed.

Take, for example, the new quarters. There are now 51 different versions of the quarter. If I pull a quarter out of my pocket and I'm looking at the back, I can't tell what coin I'm holding. It's probably a US quarter, but for all I know it's an SBA or a Canadian coin or something else wonky that showed up in the change from the store. I have to flip it over and look at the front to know -- all in the name of art, because having one design instead of 51 was boring or something. I want the old quarters back because the new ones introduced a bug without a corresponding feature. Some think the new art is a feature, of course, but my vision isn't good enough to appreciate that -- and even if it were, it still interferes with function.

So now they're redesinging the nickel. Fortunately there will only be two or three versions in circulation, rather than 51, but I still have to ask why. Was the old one broken? I haven't heard anyone make that argument. The old one wasn't even ugly! (At least the nickel starts out less ambiguous than the quarter does.)

Lots of software chooses art over usability, whether it's graphics, fonts, weird command sequences, inconsistent behavior, or the like. (You also see this in a lot of web sites, of course.) I've pretty much given up there; the software world seems to prefer the notion that art is allowed to prevent function. But I'm frustrated when I see that approach migrate into my world at large.

Again, I'm all for art -- in appropriate venues. But basic functionality has to come first. If I'm standing at the parking meter and can't tell effortlessly what coin I'm holding, I don't give a damn if it's pretty.