It’s not just what it looks like and feels like. Design is how it works.
February 12, 2017 6:00 PM Subscribe
The Web Field Manual is a curated list of resources focused on documenting only the best knowledge for designing experiences and interfaces on the web. It is an ever-expanding collection of knowledge and inspiration for web designers, by web designers.
This is good. Thank you very much.
posted by davebush at 6:55 PM on February 12, 2017 [1 favorite]
posted by davebush at 6:55 PM on February 12, 2017 [1 favorite]
Despite the growth in UX, most web design feels gratuitous, verging on user-hostile. I mostly wish websites would get out of my way—i.e. the JS/HTML/CSS equivalent of the Tufte LaTeX template. Someone, please, apply the principles of Calm Technology to web design.
posted by cichlid ceilidh at 7:02 PM on February 12, 2017 [16 favorites]
posted by cichlid ceilidh at 7:02 PM on February 12, 2017 [16 favorites]
I aspire to something as elegant (and well written) as this.
posted by mushhushshu at 7:12 PM on February 12, 2017 [8 favorites]
posted by mushhushshu at 7:12 PM on February 12, 2017 [8 favorites]
I mostly wish websites would get out of my way
YES. I work in UX and this is surprisingly really, really hard to convince people of. I made a pitch and getting out of the user's way was a fundamental principle (it was a site people used to do their job, we wanted them to be able to do their job more efficiently, etc etc). Had a lot of nodding heads and agreement after my presentation.
Next meeting? "We're going to need to have space for three blogs on the front page."
posted by synecdoche at 7:21 PM on February 12, 2017 [13 favorites]
YES. I work in UX and this is surprisingly really, really hard to convince people of. I made a pitch and getting out of the user's way was a fundamental principle (it was a site people used to do their job, we wanted them to be able to do their job more efficiently, etc etc). Had a lot of nodding heads and agreement after my presentation.
Next meeting? "We're going to need to have space for three blogs on the front page."
posted by synecdoche at 7:21 PM on February 12, 2017 [13 favorites]
Next meeting? "We're going to need to have space for three blogs on the front page."
I feel your pain dude. I wasted a TON of time interacting with someone who claimed to be really interested in podcasting, but has since come to insist that all the episodes of different podcasts on his site must be in one single totally munged up RSS feed...which of course has a logo which is about his web site and not about any of those varied podcasts. Plus, well, that's not podcasting, that's not how it works at all, that's infuriating to users actually, what he wants is really more like a YouTube channel or a podcast network. There is no explaining this though.
posted by trackofalljades at 8:05 PM on February 12, 2017
I feel your pain dude. I wasted a TON of time interacting with someone who claimed to be really interested in podcasting, but has since come to insist that all the episodes of different podcasts on his site must be in one single totally munged up RSS feed...which of course has a logo which is about his web site and not about any of those varied podcasts. Plus, well, that's not podcasting, that's not how it works at all, that's infuriating to users actually, what he wants is really more like a YouTube channel or a podcast network. There is no explaining this though.
posted by trackofalljades at 8:05 PM on February 12, 2017
mushhushshu, that website is beautiful. I was about to add how undervalued typography (and an understanding of book design) is for the web. And, of course, Dieter Rams' 10 principles continue to ring true.
As someone who is not a web designer, MetaFilter's design makes me happy.
posted by cichlid ceilidh at 8:32 PM on February 12, 2017 [25 favorites]
As someone who is not a web designer, MetaFilter's design makes me happy.
- It contains a lot of novel information, though I never feel overloaded.
- The ads are always where I expect them and they don't pretend to be something they're not, but they're unobtrusive and I trust the ad network, so I don't block them.
- I don't get the impression that anyone got trigger happy with some JS, single-page, interactive, blah blah to show what a fancy pants they are.
- The floating menu bar does not pop in and out as I scroll (some people—hi!—have twitchy fingers and this peek-a-boo behavior drives them totally bonkers).
- Unlike on Medium, nothing weird happens when I highlight text (my browsing tick).
- It loads pretty quickly.
- There's no infinite scrolling to get more page views, so I don't find myself in unexpected environs.
- There are no weird campaign trackers added to the URL, so they're nice to share. Plus, I more-or-less know that the person I'm sending the link will have a similarly intuitive time!
posted by cichlid ceilidh at 8:32 PM on February 12, 2017 [25 favorites]
Via mushhushshu's link: "straight quotes are one of the most grievous and inept typographic errors." I didn't know designers were still pushing for curly quotes. They don't say good design to me. They say "I just copy and pasted something from a Microsoft Word document." I've spent so many years trying to get people to not use curly quotes that they make my skin crawl. /derail
posted by not_the_water at 9:18 PM on February 12, 2017 [3 favorites]
posted by not_the_water at 9:18 PM on February 12, 2017 [3 favorites]
I didn't know designers were still pushing for curly quotes. They don't say good design to me.
This particular website is from the POV of a typographer, who would have his (moveable and digital) type thrown in the nearest river were he to allow such a thing as straight quotes. /derail
posted by mushhushshu at 9:24 PM on February 12, 2017 [4 favorites]
This particular website is from the POV of a typographer, who would have his (moveable and digital) type thrown in the nearest river were he to allow such a thing as straight quotes. /derail
posted by mushhushshu at 9:24 PM on February 12, 2017 [4 favorites]
I use curly quotes all the time, I�ve never had a problem.
posted by unliteral at 9:46 PM on February 12, 2017 [42 favorites]
posted by unliteral at 9:46 PM on February 12, 2017 [42 favorites]
The battle over quotes is lost; people are too used to thinking of them as a single symbol, with the curly versions just being aesthetic fussing. "Smart quotes" will help in the short term, but in the long term they just confirm that the distinction between opening and closing quotes is purely decorative. In contrast, there are no "smart parenthesis" that will turn | into ( and )-- the writer is expected to know and make use of the difference. If you want to save curly quotes, you have to get them onto the keyboard.
posted by Pyry at 9:55 PM on February 12, 2017
posted by Pyry at 9:55 PM on February 12, 2017
They are called 'inverted commas', anyway.
posted by thelonius at 10:14 PM on February 12, 2017 [2 favorites]
posted by thelonius at 10:14 PM on February 12, 2017 [2 favorites]
It's funny. Even though there are more and more people who call themselves fans of typography and fonts and design and user interfaces, there are more and more bad examples out there in the world. The one that got me today wasn't even online. It was on the cover of a book. This is something that was put out by a professional publisher who (presumably) hired professional graphic artists and typographic experts, and who I'm guessing, ran the proofs by the author (or the author's people) at some point in time.
The exact name of the book escapes me, but I'll describe it as best I can. It was a recipe book for blended, frozen drinks. The title on the cover (which was superimposed over the picture of one of the blended frozen drinks) appeared something like this:
I Blended O Drinks I
I can't tell you how long I stared at that thing, trying to figure out what the heck I O I meant. Was it the power switch on the blender? Was it some kind of attempt at bad Latin that I didn't understand? Was it some kind of graphical design?
It wasn't until I flipped the book over to the back where I read the blurb that said "101 Blended Drinks" was written by... (or something to that effect). I'm sorry, but no. I refuse to accept that representation. (Please note, the book may have been called 101 Frozen Drinks or 101 Blender Drinks. It was something along those lines. The horror of the typography knocked the full name from my mind.)
So sadly, in a world where books can be that bad, I certainly don't expect web pages (which are often put together in ridiculously short deadlines by people who aren't necessarily trained in graphic arts or design) to be easy to look at or even use. I wish it were different, boy do I wish it were different, but having gone through the process of updating the design of some corporate web pages, with every department screaming for something different, and most of them at odds with one another, I know the odds of getting something function and beautiful are pretty much planted on the slim-to-none end of the scale.
(But mainly I just wanted somebody to rant to about this really bad, really stupid book cover.)
posted by sardonyx at 10:39 PM on February 12, 2017 [5 favorites]
The exact name of the book escapes me, but I'll describe it as best I can. It was a recipe book for blended, frozen drinks. The title on the cover (which was superimposed over the picture of one of the blended frozen drinks) appeared something like this:
I Blended O Drinks I
I can't tell you how long I stared at that thing, trying to figure out what the heck I O I meant. Was it the power switch on the blender? Was it some kind of attempt at bad Latin that I didn't understand? Was it some kind of graphical design?
It wasn't until I flipped the book over to the back where I read the blurb that said "101 Blended Drinks" was written by... (or something to that effect). I'm sorry, but no. I refuse to accept that representation. (Please note, the book may have been called 101 Frozen Drinks or 101 Blender Drinks. It was something along those lines. The horror of the typography knocked the full name from my mind.)
So sadly, in a world where books can be that bad, I certainly don't expect web pages (which are often put together in ridiculously short deadlines by people who aren't necessarily trained in graphic arts or design) to be easy to look at or even use. I wish it were different, boy do I wish it were different, but having gone through the process of updating the design of some corporate web pages, with every department screaming for something different, and most of them at odds with one another, I know the odds of getting something function and beautiful are pretty much planted on the slim-to-none end of the scale.
(But mainly I just wanted somebody to rant to about this really bad, really stupid book cover.)
posted by sardonyx at 10:39 PM on February 12, 2017 [5 favorites]
101 blender drinks
I dunno, maybe it's thAt they changed font color but that barely fusses me at all.
posted by Artw at 10:59 PM on February 12, 2017 [1 favorite]
I dunno, maybe it's thAt they changed font color but that barely fusses me at all.
posted by Artw at 10:59 PM on February 12, 2017 [1 favorite]
Okay, I tell a lie, I find it hard to read the I's as 1s... but the layering? That really doesn't seem like a problem.
posted by Artw at 11:00 PM on February 12, 2017 [1 favorite]
posted by Artw at 11:00 PM on February 12, 2017 [1 favorite]
I can't tell you how long I stared at that thing, trying to figure out what the heck I O I meant.
They left off the click-baity book subtitle: "Learn the 5 drinks computer scientists don't want you to know about!"
posted by sebastienbailard at 11:20 PM on February 12, 2017 [3 favorites]
They left off the click-baity book subtitle: "Learn the 5 drinks computer scientists don't want you to know about!"
posted by sebastienbailard at 11:20 PM on February 12, 2017 [3 favorites]
It wasn't the layering. It was swapping out the I for 1 (and the O for 0). I just couldn't make that compute in any way shape or form.
Actually looking at it now (thanks for searching for it) I think the overlay was making it worse in that I was seeing the second part of the title "blender drinks" before the first numerical part. So attempting to put it all together like a puzzle wasn't working. I think I was registering the IOI as some kind of logo on the glass (like a fraternity's initials) and not reading it as part of the title.
posted by sardonyx at 11:41 PM on February 12, 2017 [1 favorite]
Actually looking at it now (thanks for searching for it) I think the overlay was making it worse in that I was seeing the second part of the title "blender drinks" before the first numerical part. So attempting to put it all together like a puzzle wasn't working. I think I was registering the IOI as some kind of logo on the glass (like a fraternity's initials) and not reading it as part of the title.
posted by sardonyx at 11:41 PM on February 12, 2017 [1 favorite]
I am really not sure why it is necessary to put so much JS on a page that it doesn't scroll smoothly on a pretty beefy modern computer in any of the browsers I tried. Especially since it is basically a pretty good list of pretty good links.
Meanwhile on the topic of good resources for people who do internet-type stuff: I can recommend Resilient Web Design by (MeFi's own) Jeremy Keith.
posted by dominik at 11:55 PM on February 12, 2017 [4 favorites]
Meanwhile on the topic of good resources for people who do internet-type stuff: I can recommend Resilient Web Design by (MeFi's own) Jeremy Keith.
posted by dominik at 11:55 PM on February 12, 2017 [4 favorites]
I miss serial terminals and 24x80 screen layouts.
posted by mikelieman at 12:45 AM on February 13, 2017 [2 favorites]
posted by mikelieman at 12:45 AM on February 13, 2017 [2 favorites]
I am really not sure why it is necessary to put so much JS on a page that it doesn't scroll smoothly on a pretty beefy modern computer in any of the browsers I tried.
Maybe that's because of attaching code to the scroll event, and not because of the sheer amount of Javascript. I recently saw an article about a way to avoid this, but it seemed a bit kludgey.
posted by thelonius at 1:15 AM on February 13, 2017
Maybe that's because of attaching code to the scroll event, and not because of the sheer amount of Javascript. I recently saw an article about a way to avoid this, but it seemed a bit kludgey.
posted by thelonius at 1:15 AM on February 13, 2017
I mostly wish websites would get out of my way
That's the goal. I saw this as someone who works in web testing: if I am noticing things about your website, it is overwhelmingly likely it is because you have bunged it up and something feels wrong. Ideally, a UI should be invisible because it operates exactly as expected by the user.
Also, WCAG 2.0 and accessibility. Hoh boy, people just do not care ("Yes, we need to be WCAG 2.0 AA compliant." "OK, then you can't use this background image behind his light text." "...We do not actually NEED to be WCAG 2.0 AA compliant.") and it makes me intensely sad.
posted by flibbertigibbet at 3:56 AM on February 13, 2017 [7 favorites]
That's the goal. I saw this as someone who works in web testing: if I am noticing things about your website, it is overwhelmingly likely it is because you have bunged it up and something feels wrong. Ideally, a UI should be invisible because it operates exactly as expected by the user.
Also, WCAG 2.0 and accessibility. Hoh boy, people just do not care ("Yes, we need to be WCAG 2.0 AA compliant." "OK, then you can't use this background image behind his light text." "...We do not actually NEED to be WCAG 2.0 AA compliant.") and it makes me intensely sad.
posted by flibbertigibbet at 3:56 AM on February 13, 2017 [7 favorites]
Since when is a box with an arrow sticking out of the top the natural symbol for "share this link on Twitter"? Icon fail.
posted by grumpybear69 at 5:06 AM on February 13, 2017
posted by grumpybear69 at 5:06 AM on February 13, 2017
dominik, Resilient Web Design uses the same typeface as Edward Tufte's books! I guess ask and ye shall receive.
posted by cichlid ceilidh at 5:30 AM on February 13, 2017
posted by cichlid ceilidh at 5:30 AM on February 13, 2017
I blame Wordpress and all the other roll-your-own platforms. Sure, you could use them to make a simple, easy to use site thatOH COOL!!! LOOK HOW THE PICTURES POP UP!!! AND STUFF CAN SLIDE AROUND!!!!! COOOOOL!!!!!!
posted by Thorzdad at 5:41 AM on February 13, 2017 [2 favorites]
posted by Thorzdad at 5:41 AM on February 13, 2017 [2 favorites]
The site worked surprisingly well in Lynx, though needed a lot of scrolling.
I have a problem with animation. Yes, sometimes that inertia scroll feature can be kind of nice, but it needs to get out of my way if I'm scrolling at the speed I need to. I also need — and this is not a nice-to-have, it's an accommodation must have — a way to stop all animations. The Esc key doesn't work any more, and every animation stopping add-on just doesn't. I'm working hard on getting past a lifelong hyper-vigilance tic: if you put something moving on your page, my eyes are locked on it. Everything else is unreadable unless I can stop it, scroll it out of the way or leave your page.
posted by scruss at 6:07 AM on February 13, 2017 [3 favorites]
I have a problem with animation. Yes, sometimes that inertia scroll feature can be kind of nice, but it needs to get out of my way if I'm scrolling at the speed I need to. I also need — and this is not a nice-to-have, it's an accommodation must have — a way to stop all animations. The Esc key doesn't work any more, and every animation stopping add-on just doesn't. I'm working hard on getting past a lifelong hyper-vigilance tic: if you put something moving on your page, my eyes are locked on it. Everything else is unreadable unless I can stop it, scroll it out of the way or leave your page.
posted by scruss at 6:07 AM on February 13, 2017 [3 favorites]
I haven't been able to extend any goodwill to the UX field almost in toto, ever since it became clear to me that virtually the whole effort had been captured by enterprise. By 2004 or so, what had felt at the outset like a radical attempt to address some of the ways in which highly-technologized everyday life confounds us revealed itself as primarily oriented to the streamlining of revenue-generating interactions.
I continue to feel, perhaps naively, that there's a need for radical UX practice, even a more profound need than ever before. But I can't see who it is that would be articulating or developing that practice. It isn't any clearer to me after reviewing this.
We've all heard of regulatory capture. UX was the first occasion of disciplinary capture I ever witnessed.
posted by adamgreenfield at 6:20 AM on February 13, 2017 [2 favorites]
I continue to feel, perhaps naively, that there's a need for radical UX practice, even a more profound need than ever before. But I can't see who it is that would be articulating or developing that practice. It isn't any clearer to me after reviewing this.
We've all heard of regulatory capture. UX was the first occasion of disciplinary capture I ever witnessed.
posted by adamgreenfield at 6:20 AM on February 13, 2017 [2 favorites]
Breaking the back button is best practice now? Fucking web hipsters.
posted by effbot at 9:36 PM on February 12 [13 favorites +] [!]
Wow, first comment in and we're already at the hollow hipster hissy fit. Anyway, what are you talking about?
Since when is a box with an arrow sticking out of the top the natural symbol for "share this link on Twitter"? Icon fail.
posted by grumpybear69 at 8:06 AM on February 13 [+] [!]
It's the share/export icon, and it's relatively common. It's a bit odd they chose this opposed to the "3 dots" icon, but it's not a fail. It's obvious they chose a "share" icon as opposed to a twitter icon because, right next to it, they are using the twitter icon to show their twitter, which is also the most common practice.
posted by FirstMateKate at 6:23 AM on February 13, 2017
posted by effbot at 9:36 PM on February 12 [13 favorites +] [!]
Wow, first comment in and we're already at the hollow hipster hissy fit. Anyway, what are you talking about?
Since when is a box with an arrow sticking out of the top the natural symbol for "share this link on Twitter"? Icon fail.
posted by grumpybear69 at 8:06 AM on February 13 [+] [!]
It's the share/export icon, and it's relatively common. It's a bit odd they chose this opposed to the "3 dots" icon, but it's not a fail. It's obvious they chose a "share" icon as opposed to a twitter icon because, right next to it, they are using the twitter icon to show their twitter, which is also the most common practice.
posted by FirstMateKate at 6:23 AM on February 13, 2017
I haven't been able to extend any goodwill to the UX field almost in toto, ever since it became clear to me that virtually the whole effort had been captured by enterprise
The buttons are labelled "submit" by default. This is not a coincidence.
posted by mikelieman at 6:30 AM on February 13, 2017 [6 favorites]
The buttons are labelled "submit" by default. This is not a coincidence.
posted by mikelieman at 6:30 AM on February 13, 2017 [6 favorites]
It's the share/export icon, and it's relatively common. It's a bit odd they chose this opposed to the "3 dots" icon, but it's not a fail. It's obvious they chose a "share" icon as opposed to a twitter icon because, right next to it, they are using the twitter icon to show their twitter, which is also the most common practice.
Well, since interaction design is supposed to be natural and seamless, and it surprised me, it is kind of a fail. Especially with the Twitter icon right next to it, and particularly because it went straight to "share on Twitter" and not "choose your sharing option." Plus I've seen a lot more of the version with the curved arrow rather than this version. But such is the challenge of a semi-standardized icon set with various designers trying to put their own spin on it.
posted by grumpybear69 at 6:32 AM on February 13, 2017
Well, since interaction design is supposed to be natural and seamless, and it surprised me, it is kind of a fail. Especially with the Twitter icon right next to it, and particularly because it went straight to "share on Twitter" and not "choose your sharing option." Plus I've seen a lot more of the version with the curved arrow rather than this version. But such is the challenge of a semi-standardized icon set with various designers trying to put their own spin on it.
posted by grumpybear69 at 6:32 AM on February 13, 2017
And, argh, I just visited the site on my laptop.
- The "Info" page, when loaded, just shows the word "Info." You have to scroll down to actually get any information! Irony.
- There is a helpful navigation tool marked "Categories" on the "Code" page which allows you to go directly to the sub-section that interests you. Fabulous! But once I'm there, the navigation tool is gone and I have to go all the way back to the top of the page to use it again. Boo! The site is responsive in a half-assed way which is more irritating than useful. Kind of like the way my bank re-designed their online portal.
posted by grumpybear69 at 6:37 AM on February 13, 2017 [2 favorites]
- The "Info" page, when loaded, just shows the word "Info." You have to scroll down to actually get any information! Irony.
- There is a helpful navigation tool marked "Categories" on the "Code" page which allows you to go directly to the sub-section that interests you. Fabulous! But once I'm there, the navigation tool is gone and I have to go all the way back to the top of the page to use it again. Boo! The site is responsive in a half-assed way which is more irritating than useful. Kind of like the way my bank re-designed their online portal.
posted by grumpybear69 at 6:37 AM on February 13, 2017 [2 favorites]
The back button *is* broken for me. If clicked once, it'll do a screen wipe and go back to the last tab-thing I was on. If click again, it screen wipes and puts me on the same screen. So if I go code -> tools -> info and then go back, I'm on info. All further backs leave me on info.
posted by RustyBrooks at 6:51 AM on February 13, 2017
posted by RustyBrooks at 6:51 AM on February 13, 2017
Several problems with this:
- As @winjer said, seriously overdesigned. This is just a list of links.
- Extremely low information density, which seems to be the fashion nowadays. Every page effectively has a "splash screen" until you scroll down – what's wrong with a heading?
- No visible link attribution – you have to check the URL on mouseover to see where it links to, which of course won't work on touchscreens. Not obvious initially that they're links to 3rd-party sites.
- Overuse of all-caps. Fine for page titles, but for card titles it reduces readability.
- JavaScript-enhanced parallax scrolling makes it feel janky on less-performant computers.
- Navigation animation looks cool the first couple of times, after that it makes navigation feel slower.
- Gratuitous card zoom animation on mouseover becomes tiresome quickly, especially if you're reading it at the same time.
- Cryptic icons, e.g. the unexplained asterisk for "new" items and the "share" icon which does not make it clear what it'll do.
- Right-click on navigation menu items actually navigates (in Firefox), probably due to overzealous JavaScript.
- Making entire cards clickable makes text selection impossible.
I mean, the site is visually attractive and the links seem to be mostly good stuff, but as exemplar it is as much cautionary as salutary. Hopefully designers learn from both.
posted by snarfois at 6:55 AM on February 13, 2017 [9 favorites]
- As @winjer said, seriously overdesigned. This is just a list of links.
- Extremely low information density, which seems to be the fashion nowadays. Every page effectively has a "splash screen" until you scroll down – what's wrong with a heading?
- No visible link attribution – you have to check the URL on mouseover to see where it links to, which of course won't work on touchscreens. Not obvious initially that they're links to 3rd-party sites.
- Overuse of all-caps. Fine for page titles, but for card titles it reduces readability.
- JavaScript-enhanced parallax scrolling makes it feel janky on less-performant computers.
- Navigation animation looks cool the first couple of times, after that it makes navigation feel slower.
- Gratuitous card zoom animation on mouseover becomes tiresome quickly, especially if you're reading it at the same time.
- Cryptic icons, e.g. the unexplained asterisk for "new" items and the "share" icon which does not make it clear what it'll do.
- Right-click on navigation menu items actually navigates (in Firefox), probably due to overzealous JavaScript.
- Making entire cards clickable makes text selection impossible.
I mean, the site is visually attractive and the links seem to be mostly good stuff, but as exemplar it is as much cautionary as salutary. Hopefully designers learn from both.
posted by snarfois at 6:55 AM on February 13, 2017 [9 favorites]
I should've added: the annoying number of things playing peekaboo as you scroll up or down. I blame Medium for popularising this. I can just about accept it for the header, but did there need to be a footer popup as well?
(And as a previous commenter pointed out, putting 'Categories' in the footer in the Code section is very unhelpful.)
posted by snarfois at 7:09 AM on February 13, 2017 [2 favorites]
(And as a previous commenter pointed out, putting 'Categories' in the footer in the Code section is very unhelpful.)
posted by snarfois at 7:09 AM on February 13, 2017 [2 favorites]
I've seen this somewhat related article shared in a couple of places today.
The pull quote: "The best-designed stuff doesn’t tell you some high-minded story; it just gets out of the way, and lets you tell your own damn story."
posted by synecdoche at 7:28 AM on February 13, 2017 [2 favorites]
The pull quote: "The best-designed stuff doesn’t tell you some high-minded story; it just gets out of the way, and lets you tell your own damn story."
posted by synecdoche at 7:28 AM on February 13, 2017 [2 favorites]
The very first thing I clicked opened a new window, which tells me all I need to know about this.
posted by oulipian at 8:14 AM on February 13, 2017 [2 favorites]
posted by oulipian at 8:14 AM on February 13, 2017 [2 favorites]
I like this quote better: "The thing that I love about the Brother printer is that it works when I hit print."
posted by grumpybear69 at 8:59 AM on February 13, 2017 [2 favorites]
posted by grumpybear69 at 8:59 AM on February 13, 2017 [2 favorites]
The fail I continue to resent is the lack of title text for these various icons. I was also thrown by the arrow-straight-up icon; I associate that with exporting, not with sharing. But they could put in a damn picture of a clown, for all I care, so long as I could mouse over it and get some idea what the designer intended for that icon.
posted by XtinaS at 9:08 AM on February 13, 2017 [1 favorite]
posted by XtinaS at 9:08 AM on February 13, 2017 [1 favorite]
I am 1) a good 15 years out from my professional web design days, and 2) viewing this on an iPad, so I'm not really one to comment on the design. But. This is reminding me of the fun I had digging into Zeldman's site in the early CSS days. Maybe it's the background color.
posted by Room 641-A at 9:11 AM on February 13, 2017 [1 favorite]
posted by Room 641-A at 9:11 AM on February 13, 2017 [1 favorite]
IOU Blender Drinks would have made so much more sense.
posted by steeringwheel at 9:32 AM on February 13, 2017 [2 favorites]
posted by steeringwheel at 9:32 AM on February 13, 2017 [2 favorites]
This type of "thoughtful" web design tends to involve the page designer taking over as much of the entire browser UI and breaking all the features that the designer doesn't personally use, such as page zoom, the address bar, the bookmarks system, the reload button (just about every "AJAX" page breaks this), the back button. Never mind more esoteric features like supporting browsers with images or JavaScript disabled. Good luck with any of that on a Web x.0 page like this.
Adding ambiguity to whether basic elements of a web browser will work to me is the exact opposite of good design. It's pretty ire-provoking that the Steve Jobs quote is right on front of this page. All of this garbage is only about how it looks and not at all about how it works.
posted by zixyer at 10:47 AM on February 13, 2017 [3 favorites]
Adding ambiguity to whether basic elements of a web browser will work to me is the exact opposite of good design. It's pretty ire-provoking that the Steve Jobs quote is right on front of this page. All of this garbage is only about how it looks and not at all about how it works.
posted by zixyer at 10:47 AM on February 13, 2017 [3 favorites]
Design-wise, I don't hate this site nearly as much as the rest of metafilter seems to. It takes a little more scrolling to get to actual content than I'd prefer, but it's not that awful. I'd shorten the height of the page headers and cut back just a bit on all the empty space around the section headings, and make that footer with the categories (which makes navigation within a page 1000% easier) way more prominent and permanent rather than small and appearing/disappearing. But overall, after a few seconds of use it was pretty easy for me to navigate. And the content itself seems super useful for me and my job, so I'm looking forward to continuing to look through it.
I understand the tendency towards wanting the information that you want front and center, I really do. But there are two problems with this. 1. You are likely not the only audience for the website, and they have to serve as many people as possible (or yes, in our commodified web, as many profitable people as possible). The website creators have to sometimes make difficult priority decisions about what, if any, content gets front and center treatment and what gets hidden behind some kind of interaction. 2. If you really prefer a super information-dense page full of text, you are within the minority of web users. People. Don't. Read. When pages are full of text, their eyes glaze over and they start skimming, so if your design doesn't incorporate some level of hierarchical typography, iconography, layout, white space, etc., you're just gonna lose your user. (In fact one of the articles within this site is about reducing cognitive load, and its interesting to see which principles in this article can be seen in practice on this website, and which are missed.)
I think I can agree that maybe UX/web design has in some cases gone too far in trying to accommodate the non-reading, web-using public. And breaking basic browser functionality isn't ok. (It seems like this site uses a pretty standard convention of content hosted on other sites opens in a new window vs. internal content in the same window; it also seems like some pages are just broken in terms of the back button while others work fine. That may be more bug than intentional feature.) But I can't agree that we should go back to a web that is full of complicated site maps and information that overwhelms instead of entices. There's gotta be a balance, and for every feature that annoys you it's at least *possible* it was chosen so as to solve another content problem that annoys someone else.
Or they just did it because it looks cool. That definitely happens too.
posted by misskaz at 11:13 AM on February 13, 2017
I understand the tendency towards wanting the information that you want front and center, I really do. But there are two problems with this. 1. You are likely not the only audience for the website, and they have to serve as many people as possible (or yes, in our commodified web, as many profitable people as possible). The website creators have to sometimes make difficult priority decisions about what, if any, content gets front and center treatment and what gets hidden behind some kind of interaction. 2. If you really prefer a super information-dense page full of text, you are within the minority of web users. People. Don't. Read. When pages are full of text, their eyes glaze over and they start skimming, so if your design doesn't incorporate some level of hierarchical typography, iconography, layout, white space, etc., you're just gonna lose your user. (In fact one of the articles within this site is about reducing cognitive load, and its interesting to see which principles in this article can be seen in practice on this website, and which are missed.)
I think I can agree that maybe UX/web design has in some cases gone too far in trying to accommodate the non-reading, web-using public. And breaking basic browser functionality isn't ok. (It seems like this site uses a pretty standard convention of content hosted on other sites opens in a new window vs. internal content in the same window; it also seems like some pages are just broken in terms of the back button while others work fine. That may be more bug than intentional feature.) But I can't agree that we should go back to a web that is full of complicated site maps and information that overwhelms instead of entices. There's gotta be a balance, and for every feature that annoys you it's at least *possible* it was chosen so as to solve another content problem that annoys someone else.
Or they just did it because it looks cool. That definitely happens too.
posted by misskaz at 11:13 AM on February 13, 2017
I haven't been able to extend any goodwill to the UX field almost in toto, ever since it became clear to me that virtually the whole effort had been captured by enterprise
For a couple of years at least, it felt like every graphic designer was rebranding as a UX designer to get a job.
posted by ZeusHumms at 11:46 AM on February 13, 2017
For a couple of years at least, it felt like every graphic designer was rebranding as a UX designer to get a job.
posted by ZeusHumms at 11:46 AM on February 13, 2017
I think I can agree that maybe UX/web design has in some cases gone too far in trying to accommodate the non-reading, web-using public.
Like how websites are sometimes designed mobile first, with the desktop version coming along for the ride?
posted by ZeusHumms at 11:47 AM on February 13, 2017 [1 favorite]
Like how websites are sometimes designed mobile first, with the desktop version coming along for the ride?
posted by ZeusHumms at 11:47 AM on February 13, 2017 [1 favorite]
it also seems like some pages are just broken in terms of the back button while others work fine. That may be more bug than intentional feature.
That's just my point, though. Intentionally breaking browser behavior is one thing and is obviously pretty bad. But I think in practice the bigger problem is carelessly breaking browser behavior. People won't use the back button anymore because it's been broken so often that its behavior is unpredictable to ordinary users. I think that breaking the back button should be treated as a fundamental design error that should be addressed as a top priority, not as a bug that maybe we'll get around to fixing someday but first let's make the page slowly fade out when you click a link.
posted by zixyer at 12:51 PM on February 13, 2017
That's just my point, though. Intentionally breaking browser behavior is one thing and is obviously pretty bad. But I think in practice the bigger problem is carelessly breaking browser behavior. People won't use the back button anymore because it's been broken so often that its behavior is unpredictable to ordinary users. I think that breaking the back button should be treated as a fundamental design error that should be addressed as a top priority, not as a bug that maybe we'll get around to fixing someday but first let's make the page slowly fade out when you click a link.
posted by zixyer at 12:51 PM on February 13, 2017
Hoo boy, even after knowing that was "101 blender drinks", I still can't read it. Eye oh eye blender drinks. It's like those abstract chess sets you can't use to actually play a game.
posted by freecellwizard at 4:16 PM on February 13, 2017 [3 favorites]
posted by freecellwizard at 4:16 PM on February 13, 2017 [3 favorites]
I wouldn't have such antipathy towards this site if it didn't present itself as an authority on design with All The Info.
posted by grumpybear69 at 8:27 PM on February 13, 2017
posted by grumpybear69 at 8:27 PM on February 13, 2017
I'm a designer though I mostly get paid for coding these days. I find myself more and more having to implement designs which are pretty but unworkable as the designer doesn't actually think things through.
I don't mind being the bad guy who says "how do you get back? " and "how do you do this more than once? " etc.
It's not really design that they're doing.
posted by maxwelton at 7:55 AM on February 14, 2017
I don't mind being the bad guy who says "how do you get back? " and "how do you do this more than once? " etc.
It's not really design that they're doing.
posted by maxwelton at 7:55 AM on February 14, 2017
« Older It feels good inside to know that you can make... | He got his boogie down. Newer »
This thread has been archived and is closed to new comments
posted by effbot at 6:36 PM on February 12, 2017 [23 favorites]