Dark Booking Patterns [#47]

I just fell down a rabbit hole learning about Dark Patterns, thanks largely to a link in an, as ever, well thought out Adactio post. To be clear, I knew what a Dark Pattern was, I just hadn’t come across the term for them before. In brief, then, a Dark Pattern is a UI decision created to get a user to do something without really knowing why or how. It’s trickery and marketing merged into one and can be used to generate actual sales, push you to a specific part of a website or article, draw your attention away from negative elements or get you to agree to participate in some way. Basically, Dark Patterns aren’t great. They’re a bit morally dubious, they can leave a bad taste in your mouth and they can actively confuse or negatively impact people.

Sounds like something that should be avoided and shunned by any morally conscious designer, right? And probably something that, when noticed, should be shamed, yes? Good, we’re on the same page. But then I read a well reasoned break down of why Booking.com is a pretty awful abuser of exactly this type of user experience design. The full article, titled How Booking.com Uses Stress to Rush Your Decisions and written by Roman Cheplyaka, is a smorgasbord of dodgy design decisions. From fake urgent messages (“Someone just booked the hotel you’re looking at!”) to hiding negative reviews, Booking.com does not fare well when analysed with a Dark Pattern mindset. Time for a boycott then, right?

Well, put simply, no. I use Booking.com quite a lot. I’m a registered member and a recipient of their “Genius” discounts, which have saved me a fair amount over the past few years. I like the wide selection of hotels that are on offer, I like how key information is displayed and I particularly like their search functionality which makes drilling down through results incredibly quick and easy. I’ve recommended the service to countless friends and family and I’m not about to stop anytime soon. Do I find the urgent messages and dire warnings of inaction irritating? Yes. Have I occasionally found myself booking a room faster than I probably ought to have because of a fear of missing a deal? Yes. The Dark Patterns are clearly working, and are definitely reducing my enjoyment of the service being provided, but it isn’t a big enough issue to tip the balance away from all the positives.

Interestingly, it seems like Roman comes to a similar conclusion. Somehow, Booking.com has done such a good job in their general, overall experience that the little irritations can be happily ignored. Some of them I don’t even agree with. Is cherry picking reviews a bit dubious? Yes, I guess so, but at the same time I would expect promotion to skew those results a little. I’ve left negative reviews in the past and know they haven’t been censored or removed, so I trust the reviews that are present to be indicative of general opinion. I would also never, personally, go on three reviews alone to inform my decision; as with eBay and Amazon I will always read the most recent couple of reviews, a couple of the best reviews (and note when they were made) and a couple of the worst reviews (also noting date posted) to get a good spread. Booking.com makes finding those reviews so painless that I’ve never really noticed the ones on the main page are curated.

I will also defend their five-step rating system. You can always expand a review score to see how the aggregate has been calculated and having five specific categories makes doing so a lot easier. In the example given in the article, Roman states that:

A great location will not compensate for sleepless nights

But I have to disagree a little bit. Obviously, it depends on what you’re looking for, but I will happily sacrifice comfort for location if that’s a priority. If I’m going to a big city and planning on being out until the early morning anyway, I don’t really care about late night noise but I do care about walking distance to the venue (for example) that I’ll be visiting. It’s a bit of a pedantic argument, but I feel like their ratings scheme is genuinely useful and wouldn’t, personally, regard it in anyway “Dark”, which shows that the concept can be a little subjective.

At any rate, agree or not, the article is well put together and is worth a read if you use Booking.com, if for no other reason than to be a little more aware of the strategies the are employing. If you do find it a stressful experience, perhaps it may even help.

Welcome to the Grid [#43]

There are a lot of new web technologies emerging at the moment which really feel like we’re entering a new era. Over the last decade, the likes of HTML5, ES6+, flex box etc. have brought the web, and the technologies on which it is built, very much into the modern day. Accessibility, responsiveness and flexibility have become standards, instead of the nice-to-have pipe dreams they were when I first built a website. Still, a lot of the new features and developments have been addressing limitations of what the web was back in the early noughties.

Right now, then, is a little different. There are still plenty of problems with how the web operates, limitations to its functionality and misuses of its resources, but with a little time and effort a website can become everything it was ever designed to be, and much more. The next round of technological implementation, then, is redesigning the way the web works. Do you need an active internet connection to be ‘online? Not any more. Want a website to do more than simply house and interlink static text? That’s getting pretty common.

Despite these huge leaps forward in terms of functionality, one element of those old, dark days has remained missing. Right when I started to learn HTML the standard approach was to mimic page setting from magazines by using <table> elements. That practice died a deserved death, but ever since the web has been slightly restricted in how it can display information in a dynamic, yet rigidly structured, manner. There have been improvements, such as display:table, flex box and semantically clearer HTML (section, article, aside etc.), but ultimately none have met the ease of application of a table layout.

Hopefully that’s about to change, thanks to CSS Grid. It’s a technology I’ve heard bits and bobs about for some time, but I’ll admit it hasn’t excited me like service workers or PWAs have. Thanks to (yet another) great article from A List Apart, I’m now firmly on board the Grid train and willing it to go faster, and faster, and faster. Honestly, I love the whole concept, but for me one of the most exciting aspects is the quick prototyping available through template-areas. For a full breakdown, read the article, but the “aha!” moment for me was seeing how this:

.cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        grid-template-areas:
               “a a b”
               “. d d”
               “c e e”;
}

Is automatically translated into this:

Layout of 5 grid blocks and 1 empty cell, showing how CSS Grid can span columns and rows, auto-fill containers and be easily spaced.
The beauty of CSS Grid.

That’s not just replicating all the functionality of the table-based layouts of yesteryear, it’s taking the best part of it, the flexible rigidity, and removing all the irritating parts, leaving just the essence. It’s wonderfully simple yet extremely powerful and has clearly been thought through to an obscene degree. The fact that even blank cells are inherently catered for, rather than having to just set a blank <div> or similar, is just fantastic. Vendor/browser support will be the next big hurdle, but by the sounds of things that’s coming along extremely well. Give it a year and CSS Grid looks like it could well be the new standard approach.

Stickers, Eclipses and Lighthouses [#36]

Today is a day for another round-up of interesting pieces from across the web. Nothing too special, but hopefully a little intriguing.

First up is Google Lighthouse, one of the many branches of the Alphabet behemoth and a pretty interesting little project. I haven’t actually managed to get it up and running, but I’ll definitely be trying it out on theAdhocracy some time soon (and probably weeping at the result). I don’t need to test it, though, to see it will be a very useful tool in battling the increasingly problematic issue of internet lag.

Second is the article which led me to Lighthouse in the first place: AMPersan, by Ethan Marcotte. Not much to add to this one, just another voice adding weight to my uneasiness with the idea of AMP and similar projects. Well worth a read if you’re interested in the open web.

In third place is a collection of ‘achievement’ stickers doing the rounds of the blogosphere right now. Originally designed by Jeremy Nguyen, published on The New Yorker and personally discovered via TheLogoSmith, the stickers are a humorous look at the pitfalls of being self employed. They’re specifically designed for freelance designers, but I feel a lot of them are applicable across disciplines. If you work from home, you’ll probably find yourself smiling and nodding.

Fourth on the list is a simple article from Martian Craft outlining “The Importance of Routine“. The post is aimed at remote works and is far from news to me, but it is a well written example of how to apply this kind of thinking. I’m saving it here more to try and force myself into setting something like this up for my own free time.

Finally, I was blown away by the “Lifetime Eclipse Predictor” visualisation created for The Washington Post (discovered via Source). In the wake of the recent total eclipse in the US, along with reading various posts on the rarity of such events, I’ve been left with a real urge to try and make sure at my path eventually coincides with a path of totality. It is a ridiculously awesome coincidence that our moon’s diameter and planet’s solar distance align so accurately. I mean, even if there are other life-hosting planets out there, we’re certainly one of an incredibly small number that can witness this phenomenon. That makes it practically a responsibility to see a total eclipse, at least once.

Empathy Just Makes Sense [#12]

Their immediate need was a revamped website, but once they understood that this need paled in comparison to all of the other places they could have an impact on their customers’ lives, they began talking excitedly about how to make this vision a reality down the road.

Let Emotion Be Your Guide is a wonderful article from Hana Schank and Jana Sedivy (published on A List Apart) which has taken me far too long to actually sit down and read. It’s worth your time pretty much regardless of your own career path, but personally it reminded me of some of the little reasons I enjoy the path I’ve chosen.

Whilst websites are a core point of contact for many businesses and deserve a rigorous, reasoned implementation the reality is that they are likely only one of many such points of contact for your customer, and each is just as important as the next.

What’s more, the best practices and strategies employed in developing a good digital foothold aren’t just applicable to the web. Increasingly, the way we think about UXD online is no different to the way we should think about every aspect of our lives. Putting empathy front and centre of your decision making is not just good practice: it’s the only method that makes sense in the long term. New features, applications, websites, brochures or whatever else are only useful if they solve a real problem, and you won’t know what the real problems are unless you talk to, and empathise with, other people.

Interneting is (Apparently) Hard [#7]

Visual representation of the HTML DOM model

Visual respresentation of the DOM

Reddit has once again directed me towards a very interesting online resource: Interneting is Hard!

The website is beautifully illustrated and boasts a very elegant design structure. There are a couple of cross-platform inconsistencies but the quality of the content and layout is excellent. A quick overview of some of the sections has highlighted the knowledge on display is equally well thought through. Overall, a very impressive find that I look forward to diving deeper into in the future and a great introduction to web design.

Cards Against Clarity

The concept of “card based” web design has been around for at least three years now. So why is it that the following quote from Khoi Vinh, written back in 2014, still appears to be a fundamental truth:

it hasn’t gotten much easier to explain to the uninitiated what, exactly, a card is.

Because here’s the thing: as much as I love reading about web design, I am still very much a member of the “uninitiated”. I can tell because I still have absolutely no idea what a “card” is.

I realised this (yet again) thanks to a recent article that cropped up in my RSS feed. I’ve been singing their praises recently, so hopefully Zurb won’t mind too much if I point to 5 Common Mistakes Designers Make When Using Cards in Design as a prime example of 1 Common Mistake Web Designers Make When Talking about Cards, chiefly, that what a card is fails to be defined anywhere.

Perhaps this whole situation is just down to me. Maybe I’ve fallen so far behind web trends that my outdated ways of attempting to understand “cards” are just not up-to-scratch. But, frankly, there doesn’t seem to be much help out there.

Early articles on using “cards” in design tend to paint a picture of API driven, cross-platform data sharing. A sort of standardised method of pushing/pulling content from/to various web apps; an ecosystem of information, if you will. That all sounds interesting and pretty great, yet presents a concept that is simultaneously vague and highly technical, creating a perfect mixture for people to be excited about yet confused over.

Yet “cards” are also used to describe certain design styles. In that linked Awwwards article a number of examples of “good card-based web design” are cited. Some, such as Dribbble and Pinterest, appear to be examples of the information ecosystem mentioned above. But then you have websites like White Frontier, which whilst being a great example of web design do not appear to have any form of content interaction or applicable data extraction methods. Yet these designs are, apparently, just as “card based” in their makeup.

As far as I can tell from Googling around the subject, “cards” are just rectangular content areas situated on a website. They might pull in information from a third party, they might just be a stock photo and a strapline. The article I initially quoted comes to a similar conclusion, that cards either fit into the “design” or “third-party” camps, which doesn’t seem particularly useful to me. If they’re just a design style then, really, they’re just a particular way of presenting content; a way which, ultimately, seems pretty much identical to how most people have always done it. If they’re only to be used when pulling third-party data then we need a tighter definition, because I don’t feel anyone would be happy suggesting iframes are all cards.

Currently, their only unifying factors appear to include being responsive, rectangular and online. So perhaps that’s all there actually is to them, which would be rather neat. If that is the case, then I can happily claim to have been making card-based websites since 2007, putting my well ahead of the trend!

Gouty-Stem Trees For All

19th Century pencil illustration of an Australian Baobab tree, titled Gouty-Stem Tree

Ah, the good old “Gouty-Stem Tree” of Australia! Actually, I honestly had no idea that Baobab’s had reached the Great Land of Oz; I have (mistakenly) always assumed they were endemic to Africa, but apparently not. But, apologies tree-lovers, this is not a post about these wondrous, bulbous monsters of the savannah but rather how I came to learn about them in the first place and, importantly, why I can share the above image without any worries of reprisal.

The “Gouty-Stem Tree” (the image, not the plant) is an illustration taken from John Stoke’s book “Discoveries in Australia; with an account of the coasts and rivers explored and surveyed during the voyage of H.M.S. Beagle, in the years 1837-43“*. Not a book I’ve ever read (or actually seen), sadly, but one of hundreds that have been archived and “digitised” by the British Library to help preserve and catalogue their huge collection, which is all available to the public. Better still, this particular image, alongside hundreds of similar engravings, etchings, drawings, maps etc., has been released as part of a side project of copyright free pictures (due to the age of the books), all made accessible and shareable via Flickr. You can check out the full, ever expanding collection over here (its definitely worth it).

A friend pointed this out to me, largely for use in world-building, writing and LARPing exercises (more her forte, sadly) but personally I can also see a very valuable resource for designers, with some fantastic wildlife imagery that I’m itching to incorporate into some future projects. Happy hunting!


* I have no idea if this refers to the H.M.S. Beagle, of Darwinian fame.