Generation UX – How to make websites age-friendly
whatusersdo.com
whatusersdo.com
Does anyone actually believe that this crap leads to a better user experience? Are UX concepts and standards so inbred that the people involved just can't separate chocolate pudding from excrement anymore?
The big thing to understand is a lot of people in The Blogosphere(TM) who post articles about UX don't really give a rip about anything other than the pageviews whether it's for ad revenue, establishing themselves as a thought leader, or trying to market their company. Even worse, there are some people who don't even ACTUALLY know much about UX, they just want to post an article about it to spread around LinkedIn and seem relevant by harping about the importance of UX, etc.
Having said all that, if you sift through all the garbage there are some great resources. Some of the big players in the space tend to do it well. InVision's blog, for example. UXPin are pretty good. There are lots of little ones like UXPowerTools' content marketing emails that are starting to do a good job as well.
At this point as someone who is always trying to improve as a UX designer, I have become accustomed to vetting the 100:1 ratio of garbage articles to bad ones.
thanks for the link
unless they're all about integrating bootstrap for customers...
I would definitely subscribe.
http://us13.campaign-archive1.com/?u=9d0a3aa098b89309c0b66b8...
It took a lot more effort/diligence than I had figured it would to keep all the links straight and add what I thought was helpful narrative context. I wasn't having much fun or seeing a whole lot of support, so I stopped.
This comment anecdotally reinforces my impression that UX people today (I assume you're either a UX people, or a people interested in UX) have a bias for full-width sites and browsers.
I rarely run my browser full-width (and I think many UX/UI designers rarely do anything else but full-width).
When I opened the page under discussion, I didn't see any social sharing bar at all, just editorial content. And when I read your comment I went "huh?" And then "oh."
So I full-widthed my browser, and saw what you're complaining about. (I didn't notice any scrolling problems. And I didn't notice a popup; that may be because of my adblocking addons.)
As far as I'm concerned, this site exhibits very good UX for this particular aspect of the site. If the browser isn't wide enough to display the sidebar, it gets moved to below the editorial content. That's so refreshingly respectful!
Most often I see "beautiful" sites that have to be sidescrolled if the browser isn't full-width. I do two things in that situation:
1. I turn off styles, which then makes everything flow within the viewport (It's 1990 again!) and moves all the blocks to the order that they appear in the html. Because all I care about are words and pictures, not features. Again, in this site's case that works fabulously, because the site makers ordered their blocks so that editorial content is first; abcnews.com is a good example where, if you turn off styles, the content of interest doesn't appear until you scroll way down the page.
2. Or I leave.
It's also important to note that the bar of social network icons are not below the editorial content shere they would dwell on any remotely useful website, but on top of it. The design feels almost contemptful of its audience. My experience as a user is that I am disrespected and hated.
I used it on a cell phone. My choices there are limited to landscape or portrait mode, both of which behave awfully in subtly different ways. They obviously went out of their way to make a mobile version of the layout, though. They just didn't think it through, because they suck at UX.
And yes, since I am a user, I am interested in my experience. I can't say that I have a bias for full-width sites and browsers, but even if I did, why should my experience be worse in full screen than in a smaller window? Why should it be worse on a phone? The content is text. You read it from left to right, from the top to the bottom. Laying it out in a way that doesn't inspire self harm is not rocket science. Despite these vapid UX blogs making their snake oil salesmanship out to be valuable and insightful, they've failed to find a solution for the most basic problem. They can't even lay text out without having useless crap hovering over it. It's like calling yourself a plumber when you can't even flush your toilet.
Frankly, I'd rather side scroll, because at least then I'd have to make a conscious effort to see all the non-content.
Ah, of course. He's using it wrong!
My point is that the page builders consciously thought of this part, and came up with a reasonable and accommodating design, which I (a narrow-width user) only noticed because of the comment.
That reminds me of my numerical methods professor who gave talks on how to present things - and his lecture was literally the worst at the entire uni and this is not just my opinion, this fact was established by anonymous student vote. He had power point presentation slides stuffed full of formulas - literally 10-20 lines of mathematical theorems and proofs, and he just clicked through the pages, leaving no more than a few minutes for such complex slides.
Additionally the mid blue for the route obscures the street name.
Also 'Home' works on some GMaps but will take you to Home hardware, the Home Office etc in other versions.
Basically Google Maps is a summary of Google itself: the best data and pretty damn poor UX.
What astonishes me is how much GMaps doesn't learn. Every time I use the map to go to a place by car, my way back is back home. But it doesn't suggest it by default, and doesn't even get the hint when I type "home"...
To me, this is how IA will look. It knows you perfectly from a Bayesian perspective, but some product manager decided that the bayesian suggestion is the only place that won't be suggested to you...
Same for distance. There may be a restaurant called "The Place To Be" next to you, but it will ask for anything named "Place" within 1000km...
I've used multiple phones across continents but yet tend to suffer from the exact same problem. Strange!
The inverse problem exists on the browser, though - there's no way to resize the viewport on mobile.
I'm convinced 9 times out of 10 carousels are installed because the customer got sick of looking at their own site.
(Our recommendation was to avoid a carousel, but the client had to have it!)
BofA's site now complains I'm using an "unsupported browser", even though they claim to support Firefox. About half the time, login just hangs. Refreshing the page shows a logged-in state.
When transferring funds from one account to another, sometimes the transfer process hangs. The "Approve transfer" button darkens, but the page is not refreshed. Sometimes the transfer has taken place, and sometimes it hasn't.
Yesterday, I did a transfer between accounts, and reached this situation. I looked at the account status and didn't see the outgoing transfer listed. So I re-did the transfer, and then saw the outgoing transfer listed. I printed the account transaction history.
Today I get a warning that an account is overdrawn. Checking account status, I find that there are now two identical transfers between the accounts, resulting in one being overdrawn and the other being overpaid. An hour of phone calls, mostly on hold, was required to fix this mess.
BofA's web site is using TouchCommerce ("Engage with your customers the way they want to engage") Adobe Audience Manager ("Build audience profiles that you can use anywhere"), and Tealium ("a single approach to connecting data across teams, vendors, and touchpoints in real time"). They've added ads for "special offers". They use these even on live transaction pages, which is a possible security flaw. Code from those sources produces huge numbers of browser errors (the obsolete "star property hack" for IE6 causes many of them) indicating sloppy code.
Sigh. May be time to change banks.
While the site focuses on seniors, a lot of the suggestions are good ones in any case - fonts larger than legalese and with good contrast will make your page more easily approachable and less likely to lose viewers who get frustrated because they can't read what you're trying to say.
I'm 29 and my eyesight with glasses is ok. Been wearing 'em for 22 years.
But really the worst offenders are gray text on lighter gray background websites. Whyyyy designers why?
It's not that I can't read it at 100 it's just tiring and I have mild astigmatism so I get eye strain.
https://blog.attackthefront.io/your-body-text-is-too-small-5... makes a pretty compelling argument that 18px is the new minimum, and I think I'll be following this advice on any of my future sites.
Because A E S T H E T I C
I've yet to see any designer articulate a reasonable defense of this shit.
Color calibration.
On a good monitor, 10 or 12bit depth, 1000 to 10000nits of contrast, which designers tend to have, black text on white background has such a high contrast that it creates actual pain, and migraine.
So they use dark grey on light grey instead, and then, for them, it looks exactly like newspaper text.
A customer on a cheap, garbage monitor – maybe just 6bit of colors, 50nits of contrast – on the other hand, can’t even reach the contrast of a newspaper if they’d go full black on white contrast.
The contrast between the darkest black and the brightest white on a cheap monitor is equivalent to the contrast ratio between 40% (approx #666666) and 60% grey (approx #aaaaaa) on a designer’s monitor.
You know what happens with those gorgeous monitors with perfect contrast and beautiful calibration when it's sunny outside and my blinds aren't down or I'm physically outside with my laptop? They turn flat black. Can't see shit.
Also designers sometimes push the contrast thing too far. In both directions.
#000000 on a cheap screen is equivalent to #666666 on an HDR screen, #ffffff on a cheap screen is equivalent to #aaaaaa on an HDR screen.
So if a designer uses something that looks exactly like newspaper contrast to them, it’ll look unreadable on a cheap screen.
Maybe that means you need to turn down your screen's brightness.
Because then displaying color-calibrated content on your display (such as movies, games, photos) is also completely distorted.
Instead, we need a way to specify CSS colors relative to a colorspace and contrast ratio.
It's called sRGB and it supposedly has a "black point" which is not entirely black. Nobody uses it though, on photos it would be useless. Also for me black on white is perfectly fine in a well lit room. White on pitch black is indeed problematic. Anyway, it could be a user/browser preference instead of a designer preference.
Lowering brightness shouldn't distort color-calibration too. You are supposed to match your brightness to the surrounding lighting too.
Correct, but it requires recalibration if you lower the brightness (as no screen has a perfectly flat curve)
I've settled into using the menu option "View..Page Style...No Style" on noisy pages.
Now I need a "No Style" browser that finds the beginning of the narrative automatically.
Honestly, that one button fixes almost every UI/UX problem I encounter. I never use Reader Mode, I never open developer tools, I just nuke styles, read the site and move on.
Right-click, inspect. Uncheck font-color setting on article!
How bad is your eyesight with corrective lenses?
For example, I tend to put my phone screen very near my face in the evening.
No such thing as perfect eyesight when you've been wearing glasses since you were 8 ;)
I read it as "send offending designs to..." - like it was a 'name and shame' kind of site instead of the reasonably helpful resource that it is.
My apologies.
I think "web developers should make things more readable" is addressing the symptom and not the problem. The solution is simple when it comes to readability: wear corrective lenses.
First, as your eyes lose the ability to focus (which is a gradual process, not a step change), you find that over time you need more and more lenses: one for objects at 18 inches (your laptop), one for objects at 24 inches (your monitor), etc. You don't always have the proper lenses at hand when you need them.
Second, all the transparent bits of the eyes slowly become less transparent with time. Some problems (cataracts for instance) can be fixed with surgery; others would require replacing the entire eyeball.
Third, a number of unlucky people develop problems with their retinas, which may or may not be fixable, and the fixes rarely leave the retina in as good a shape as it was when it was younger.
So "wear corrective lenses" is not a bad suggestion, but if web designers are targeting older people, they need to assume the the reader's eyes are not what they once were, and that there may not be much that the reader can do about it.
Make your font bigger (14 please), choose the font face for clear character distinction, and increase the contrast.
An example of what I feel is an elegant solution - They used to have the hardest time playing/pausing YouTube videos when they would rely only on the buttons. However, once I showed them how to play/pause by clicking the entire video, they were relieved and much more appreciative of the technology. I think that this approach is more sound; instead of simply making everything larger, or having larger clickboxes, simply create multiple ways to interact with the content that doesn't interfere with other users. Nobody is upset that you can play/pause videos by clicking on them, but I imagine they would be if the play/pause buttons were 5x larger than they are now.
I like an attractive web site, but only as long as I can read it instantly.
I run into this a lot when I watch how my older users interact with our site. They act like they are about to hit the nuke button when performing some actions on the site, and I am sitting there thinking it is totally fine, even if you mess up you can just go back. But there is so much anxiety around accidentally messing something up that they would rather abandon the task than do it.
I hope that I can continue to improve my skill in UI/UX because it is so critical as a web developer.
If you are targeting older users, keep in mind that many of them are accustomed to reading text, and would prefer a couple of explanatory sentences to a semi-mysterious icon.
Hah. I don't know why this receives mention - while I'd love it if it were common practice, nobody actually thinks about this and it's unlikely to change. And it's not just web sites: let's not forget the slew of Electron apps where keyboard integration is nonexistent, partial, or an afterthought.
Just going back to bootstrap 2, for all its problems, would be a step forward at this point.
I think these are positive for UX: compare the shotgun blast of color on OS X default icons to the simple, clear shapes of Windows 10's default icons.
The more methods you use to differentiate things from one another the easier it is to navigate an interface. Abandoning depth so completely was already stupid, mostly-white-on-blue-uniform-squares? You have color, use it! That shit was awesome when I was 19 and wanted to make my XFCE monochrome because I thought it looked cool. It's not awesome when major OS companies copy my awful teenage taste in desktop aesthetic just because it makes for slick-looking screenshots. Please, someone, have better sense than that.
Look, this: https://dri1.img.digitalrivercontent.net/Storefront/Company/...
Is not something to aspire to. If you think that's easy on the eyes I can only assume you never used interfaces back when you could tell one thing from another without having to play Where's Waldo—which, admittedly, was pretty long ago at this point. Look at the buttons on that dialog! Who OK'd that?! Look at those crappy icons that look like the 404-not-found of the icon world! Don't look at where Mail is on the far left. Look at the center of the screen. Tell me which one's mail. Can you even guess? Just tried it on my MacBook, and I could tell what every icon was out of my peripheral vision, thanks to the "shotgun blast of color".
OS X in particular had multiple levels of shininess which made it hard to distinguish the actual shape of the objects - they learnt their mistake and are attempting to roll it back years after Microsoft popularised digital first design. The Linux DE's haven't even learnt that yet.
Windows mail uses an envelope symbol. It's far more obviously mail than a picture of an eagle flying in the sky with a white scalloped, stamp-like border. Do people even use stamps anymore?
Compare with the OS X-style "Cars: fast as lightning" which I guess is a car but is so detailed I can't really tell.
Looking back at Leopard screenshots (I assume that's part of the era with the supposed excessive-shininess?) those icons were slightly worse because smaller (probably configurable though? I don't remember) but their shape seems to be a bit more apparent and distinctive (most of mine on Sierra are squares or circles) so I'd call it a wash, usability-wise. Maybe slightly favoring the new ones because color is easier to distinguish in peripheral vision than shape. I'm not seeing a practical problem with the use of depth, aside from "depth is bad now, because reasons".
Microsoft's Win10 design is like the kind of thing developers come up with when they manage to banish designers from a project—not saying that's what happened, and I doubt it is, but it really looks like it (I can't get over that drop-down box, god, it's like I tried to style it). It's incredibly bad. It reminds me of really old "how to make your web forms pretty" tutorials from the pre-CSS days. I seriously thought I was in some kind of safe-mode when I started it up the first time.
[EDIT] actually, rather than pre-CSS, let's specifically go with "when people used the term DHTML". STRONGLY reminiscent of that time period—but not of finished websites, of web design tutorials from that time period.
An envelope is an arbitrary thing that means email. Much like a floppy disk is an arbitrary thing that means save. The postal system and floppy drives are about as relevant as each other.
I prefer the taskbar icon look - ie, raw shape - than the colored background look too. But the raw shapes certainly are far more better than the distracting, detailed pictures which serve only their designers.
The Win10 design is what happens when designers consider users over themselves. I think you're favouring OS X simply because you're familiar with it. But it's clear that Android since 4, OS X since 10.10 are all following the same direction that Microsoft popularised way back in the Zune era.
If you got 1000 people who'd never used a computer before, and asked them to find 'mail' between the 'envelope' and the 'picture of the eagle with the scalloped background' were mail it's predictable what the outcome would be.
[EDIT] As for familiarity, I started on DOS, was a Windows user from 3.1 through 10 (finally ditched 10 a couple weeks ago because it pissed me off one too many times) including NT3.5 and 4, plus 2K, and mixed in a ton of Linux plus a fair amount of BeOS and a touch of QNX starting around the Win98 era. I've used KDE since IIRC late version 1 or early 2, Gnome since before it was bad, and spent lots of time in both Windowmaker and XFCE for good measure. I've used CDE on Solaris in anger. I only jumped on Apple devices ~5-6 years ago for work. With all that context, I feel confident asserting that the Win10 interface looks like the punchline to a joke that I just don't get—it's got nothing to do with exclusive familiarity with Apple.
I've used all those systems you have, and the worst are ones where someone had tried to use the entire palette or colors and greatest graphic detail in shapes.
The bird is distinct. I know it's thunderbird because that's the icon thunderbird uses. I can upgrade windows and still find it. If you are making things easier for new users but ALSO worse for existing users, you're not doing anyone any good.
When I gave my mom an iPad, which already came with the fancy new thin flat iOS design, I had to first switch to a larger, fatter font (thanks, Apple, for making this possible in the Accessibility settings!), and then spend quite some time explaining things, as many controls ("yes mom, that word is actually a button you can press") and gestures were not easily discoverable.
The fat 3D buttons were much easier to discern. (Note that Apple also has a "Button Shapes" settings in Accessibility to re-enable them, though not as "3D". Maybe they could have a global "beginner" or "senior" setting that would switch these settings over from pretty to functional and discoverable...)
It went from "what should my grandma use? Definitely an iPad, no question" to "what should my grandma use? Ugh, god, a Chromebook I guess?"
Now force-touch, and new gestures, and crap sliding from the top and bottom of the screen, on top of everything else. It's much easier to get lost in for someone who's half-terrified of computers, which is still lots of people, and I'm not sure it's much better for the rest of us, either.
Unfortunately the design world (and the art world more generally) appears to be extremely prone to binary thinking: either something is obviously wonderful, or it must be discarded completely.
See my sibling comment: flat UI improved default aesthetics but hurt UX. We should have retained simulated depth (and higher contrasts for important UI elements) for the usability advantages. It was a matter of refining what we had, rather than tossing it all out.
Nobody asked your site to mess with my preferred font sizes or colors. Nobody asked you to break or poorly reinvent the standard system controls, especially since (at least on Macs) normal controls have strong accessibility support built in.
Strange how a world of tech can easily forget its ability to spread to users who need it most.