Tuesday, July 26, 2016

Smashing Newsletter #162: eCommerce UX, Free iOS/Android Controls and Eye-Candy

Nobody likes filling in web forms, yet some input fields are more annoying than others. At SmashingMag, we are currently redesigning our checkout UX, and having the option to rethink the experience from scratch, we created a wishlist for the perfect checkout. Issue #162 Tuesday, July 26th 2016 196,308 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Nobody likes filling in web forms, and some input fields are even more annoying than others. At SmashingMag, we're currently redesigning our checkout UX, and having the option to rethink the experience from scratch, we've created a wishlist for the perfect checkout.

Since many people copy and paste their email address when asked to verify it, why not ask users to review their email input when they care about it most? For instance, in the last checkout step — before they proceed with payment? (Don't even suggest disabling copy-paste, please.) Instead of asking for the password, perhaps it would be better to ask for a pass phrase instead. Also, we'd like to show the final price already in the shopping cart, by asking for the customers' locations in the early steps of the buying process (e.g. for printed products).

RyanAir Example
An example of good eCommerce UX on RyanAir. The full price options are shown in a drop-down cart (the bottom) even before the checkout starts.

In terms of interaction, we'd like to use a fancy add-to-cart interaction and disable critical actions ("Next" button) upon clicking to prevent double submissions, and also disable items that can't be clicked yet. Inline validation should be always performed on the data, never on the fields. Padlock icon matters, too, and so do properly designed checkboxes. Last but not least, the billing address should be the shipping address by default, while a country selector drop-down should become country auto-suggest with a ZIP Code Prefill.

These may all seem like a few minor, fine improvements, but they may significantly improve the overall experience, and that's exactly what we'll be focusing on in our usability tests. Of course, we'd love to hear your thoughts, opinions and first-hand experiences (what has been the most memorable eCommerce optimization technique in your projects?), so please do share them on Twitter when you find a few minutes.

Keep optimizing!
– Vitaly (@smashingmag)

Table of Contents

1. Little Dirty Responsive Email Tricks
2. Pixel Art Meets CSS
3. A Different Kind Of Command-Line Interface
4. A Circle Here, A Circle There
5. Goodies: Free Fonts And iOS/Android Controls
6. The Power Of A Hashtag
7. Perfmatters: HTTPS, High-Performance Images And 1×1 Pixels
8. The World's Hidden Wonders
10. Upcoming Smashing Workshops
11. Smashing Highlights (From Our Archives)
12. Recent Articles On Smashing Magazine

1. Little Dirty Responsive Email Tricks

There's nothing more frustrating, annoying, horrible and challenging than building a responsive cross-platform email. Gmail doesn't understand media queries, CSS support is very limited in many mail clients, JavaScript isn't available most of the time and images aren't loaded by default (unless it's Gmail).

Little Dirty Responsive Email Tricks

How do you make your responsive email work in such conditions? By using dirty little CSS tricks, of course. TutsPlus' series on building their emails features a few of those tricks, while Campaign Monitor suggests mobile-first emails. You can also use templates and patterns and libraries and resources and quite a few HTML email frameworks. Good luck! May the force be with you! (vf)

2. Pixel Art Meets CSS

What would the history of computing have been without pixel art? To revive a bit of the retro charm of the good ol' days, Javier Valencia Romero's pixel art creator gets the colorful squares fit for today's web: by turning them into state-of-the-art CSS — and even CSS animations.

Pixel Art Meets CSS

The visual in-browser editor provides a grid that makes it a breeze to create and export pixel artwork. All you need to do is select a grid and pixel size, and, well, color in the squares. Exporting your piece into a CSS snippet that is ready to be copied and pasted, takes only one click. And if you want to create an animation sequence, simply create multiple frames and the tool will automatically turn them into an animation. It's even possible to tweak the duration of each individual frame without setting a hand to the code. Nice! (cm)


3. A Different Kind Of Command-Line Interface

Now here's a nice terminal that you'll probably like quite a lot. This terminal emulator is running purely on JavaScript, HTML and CSS. HyperTerm was created to offer a different kind of experience for command-line interface users. If you take a closer look, there are some nifty hyperpowers hidden, and you can even activate the wow mode!


The plugin system is powered by npm, and it features a reactive configuration system. Not only is it hackable and inspectable, it is completely extensible as well. HyperTerm is licensed under MIT and is currently only available for Mac OS, but builds for Windows and Linux are coming very soon. (il)

4. A Circle Here, A Circle There

Four years ago, Twitter revealed the future of their brand: the new Twitter bird. Based heavily on perfect circles, the Twitter logo was designed with basic geometrical proportions. "Clever!" thought Dorota Pankowska, art director from Toronto, Canada. She decided to try out the technique using 13 circles to illustrate 13 animals — and we're so glad she did! The result is absolutely stunning.

13 Animals Made From 13 Circles

While it's rather simple to draw things using basic shapes like squares, rectangles and circles, it's entirely different to use those shapes in a reversible way. As you can clearly see from Dori's work, using this method can result in a well balanced, consistent piece of artwork. If you're already a fan of her work (which we're sure you already are by now), you'll be happy to hear that these illustrations are available as printed posters! Simply circtacular! (il)


5. Goodies: Free Fonts And iOS/Android Controls

There is something almost magical in smooth, delightful interactions that one sometimes finds on Dribbble or GitHub. Yet more often than not, they are nothing more than fancy animations. Open Source iOS and Android Controls is a growing library of available components that you can apply in the design of your native application right away. Including some of the fancier examples such as folding cell (Android), Reel Search and Expanding Collection. All open sourced.

Free Fonts

If you rather fancy free fonts, you might like Bricks, an extensive font family that revives the Constructivist era and consists of the simplest triangle and rectangle forms. Or if you like monospace fonts, then apple-sans-adjectives and Space Mono might just spark your interest. Happy downloading! (vf)

6. The Power Of A Hashtag

A hashtag is more than just a pound sign. Hashtags have sparked conversations, inspired change and brought awareness to important issues that people have faced around the world. Bourn, a creative studio run by Kim Goulbourne, decided to partner up with hashtag inventor Chris Messina to bring hashtags-inspired art to New York. Goulbourne emphasizes that, "Hashtags capture the most memorable moments in our culture, and I wanted to find a unique way for people to experience how they've shaped our world." And so Hashtags Unplugged was brought to life.

Hashtags Unplugged

In this art exhibition, 25 diverse artists were invited to explore ten memorable hashtags including #LoveWins, #BlackLivesMatter, #HeForShe and #TheDress. The artists were given the freedom to choose any medium of their choice, be it painting, illustration, video, installation, or sculpture. So, if you had been invited to participate, which would be your most memorable and viral hashtag of the year?


7. Perfmatters: HTTPS, High-Performance Images And 1×1 Pixels

One of the main reasons why HTTP/2 hasn't been adopted widely yet is because browser implementations require it to run over HTTPS. Now, getting a certificate might not seem like a big deal, but in practice it requires dealing with migration to HTTPS and mixed content which can be quite a challenge — especially on larger websites. It is doable, but just not that easy.


Considering that HTTPS adoption has more than tripled in the last year (reaching 9.6% of all top 1 Million websites), a move to HTTPS doesn't seem "too early" any longer. The benefits? With HTTPS, we can use not only HTTP/2 but also Service Workers to improve performance dramatically. Google ranks HTTPS websites higher than HTTP peers, and mobile platforms default to requiring HTTPS on native app APIs. You can make HTTPS run fast, too. So, is a move to HTTPS worth it? Most certainly.

Not good enough? Well, we can also use more advanced image optimization techniques (free eBook, requires registration) to deliver images faster. Ah, and just in case you were ever wondering what technique works best to compress an 1×1px image (placeholder images or web beacons), this article covers the challenge in detail. (vf)

8. The World's Hidden Wonders

There are probably places you've heard of one too many times, and then there are places you never even thought existed. Have you heard of a home built entirely out of paper? Or this small chapel that was built of human bones and decorated with a golden skeleton? Well, Atlas Obscura is the definitive guide to the world's wondrous and curious places to see.

Atlas Obscura

Once you've found a spot you absolutely want to visit, the site helps you find your flight and hotel right away — with no further delay. Now that's quite user-friendly and a nice UX strategy to follow, wouldn't you agree? Oh, and in case you always seem to forget something before traveling, check out Packing Essentials. Packing lists are always great to have around, and we're sure you'll never forget anything else ever again! (il)


Upcoming Smashing Workshops

With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Workshops at SmashingConf Freiburg

SmashingConf Barcelona

Workshops at SmashingConf Barcelona

Full-Day Workshops With Vitaly Friedman

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!

New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • UI Specialist at Fabasoft (Linz, AUT)
    “We're looking for specialists in the development of what is probably the best cloud in Europe; people who will support us in the development of software for mobile apps for innovative cloud solutions.”
  • Senior UX Manager at Influenster (New York, NY)
    “We're looking for someone with excellent design instincts, a strong intuition for how consumers interact with our site, and a deep knowledge of today's design tools to take on a key role in shaping the future of our product.”
  • WP Developer at Ginger Design Inc. (East Coast, CAN)
    “We are a digital agency looking to add a few great WordPress Front-end developers to our talent roster.”

Smashing Highlights (From Our Archives)

Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Iris LjeĆĄnjanin (il), Vitaly Friedman (vf), Cosima Mielke (cm), Markus Seyfferth (research).

unsubscribe update preferences view in your browser

No comments:

Post a Comment