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)


Advertisement
Ad


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!

HyperTerm

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)


Advertisement
Ad


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?


Advertisement
Ad


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.

Perfmatters

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)


Advertisement
Ad


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


Tuesday, July 12, 2016

Smashing Newsletter #161: Rethinking Chat UIs and Breaking Out Of The Box

Customer support matters. Why don't you spend a bit of time today exploring common customer service requests, or the backlog, or common complaints, or just spend half an hour on the customer service hotline, and try to help out your users with the issues they've been facing? Issue #161 Tuesday, July 12th 2016 188,984 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Good user experience does not only lie where the interface lives, but also where complaints and problems occur. While a lot of time is usually spent on perfecting the pixels and concatenating the JavaScripts, little fine details such as interface copy and customer service often go unnoticed and underrated. A good experience is all about clarity, and resolving issues in a convenient, delightful way.

Why don't you spend a bit of time today exploring common customer service requests, or the backlog, or common complaints, or just spend half an hour on the customer service hotline, and try to help out your users with the issues they've been facing? It's remarkable how many issues can be uncovered by observing just a couple of conversations, very much like watching a user interview.

Customer support matters
If you have a few minutes to spare, please send us your thoughts via a feedback form.

Well, we're also curious to hear your thoughts on how Smashing Magazine should evolve in the future, and so if you have a few mins, you're very welcome to share your thoughts with us. And if you have more time to spare, why not watch a couple of recent SmashingConf videos, available to everyone — for free, of course. Oh, and we'd love to see you at one of our upcoming conferences, you know! ;-)

Customer support matters,
– Vitaly (@smashingmag)


Table of Contents

1. Rethinking The Chat User Interface
2. Plain, Vanilla JavaScript Resources
3. Practical Front-End Tools
4. Breaking Out Of The Box Inspiration
5. Free, Web-Based Image Editing
6. A Messaging Design Kit For Sketch
7. Visual Narratives And Storytelling
8. Interactive Timeline... In Dots!
9. Upcoming Smashing Workshops
10. New On Smashing Job Board
11. Smashing Highlights (From Our Archives)
12. Recent Articles On Smashing Magazine

1. Rethinking The Chat User Interface

If you're designing web applications today, chances are high that you're dealing with a messaging component that allows your users to connect or exchange messages. Now, we tend to think that the interface for chats is quite straightforward, i.e. two bubbles, in different colors, positioned across each other, with a support for emoji icons and dots to indicate that somebody is typing. However, what if we rethink the chat UI altogether?

Chat UI

That's the purpose of Prabros' experiment on rethinking the chat UI. The team has come up with a multi-group-chat home screen, "message seen/unseen" notification with a blinking eye, instant reply on swiping down, message indicators, and even group chat likes. Some very interesting ideas worth exploring and building on top of. There's definitely room for innovation and experimentation here. (vf)


2. Plain, Vanilla JavaScript Resources

jQuery was a great solution to overcome the JavaScript issues that IE6 and IE7 were dealing with. But today, in times when browsers are rather easy to deal with, dropping jQuery completely and going with plain JavaScript could actually be a good idea (well, sometimes). Especially since applications that run on plain JavaScript without dependencies will have a better performance. And they spare you the hassle of having to request, parse and execute libraries, too.

Plain JS

If you want to dive into vanilla JavaScript, plainJS features a collection of useful, plain JS resources: layout and design plugins, input controls such as date pickers, autocompleters, and form validation, as well as navigation elements. Worth bookmarking. (cm)


3. Practical Front-End Tools

Front-end developers are always on the hunt for practical techniques, libraries and tools to make their life at least a little bit easier. Luckily, the abundance of tools is quite remarkable, but finding just the right gems can be an exercise in patience and stubborness.

Snapper

If you're using star ratings, Starability.css is a nice option for accessible ratings with various visual effects. You can build fancy underlines with a dash of CSS, too. Searching for a better carousel? Snapper.js is a CSS Snap Points Carousel with a polyfill.

Besides, you can use cursor trails technique to present content in an interesting way, or lightweight CSS alternatives to common JavaScript solutions such as toggle, accordion or floating label — ah, and of course Parker, a static analysis tool, that provides insightful metrics about your CSS files. (vf)


Advertisement
Ad


4. Breaking Out Of The Box Inspiration

In times when non-generic designs are hard to come across, how would you strategically art direct a design to stand out? Here's an idea: as Dan Mall suggests in his talks, "pick your signature". This may be a subtle transition, a horizontal line, a fancy custom drop cap or even skewed headline. Whatever it is, tune it up so it's consistently used everywhere.

The Boat

The Boat (beware, heavy website) achieves it all with its custom illustrations and comic book effects, while Behind The Hashtag celebrates exhibitions with 10 unique and funky layouts for its exhibits. You say you just can't afford so much art direction to feature a strong point of view? Well, it can be done in a simpler way, too. The University of Sydney uses irregular headings and heavy-contrast lines throughout their entire design, The Intercept probably has the largest newsletter box ever seen on the web, and MIT Technology Review uses large boxes instead of shiny round buttons. Being unique isn't a lot of work; it's just about finding that unique point of view and tuning it up. (vf)


5. Free, Web-Based Image Editing

You need to quickly edit a PSD file, but you don't have Photoshop installed on your machine? Or you want to make a small edit to an image, but firing up Photoshop would mean taking a sledgehammer to crack a nut? Well, then Photopea could do the trick. The free image editor is web-based and comes with a UI that is very similar to what you're used from Photoshop.

Photopea

Photopea supports layers, layer masks and blend modes, and offers a lot of the tools that you love from Photoshop: the Magic Wand, Lasso, and Clone Tool, for example. It can handle PSD, Gimp, and WebP files, as well as common image formats, of course. A nice alternative for quick edits. (cm)


6. A Messaging Design Kit For Sketch

A conversation via text message is a good way to nurture the relationship with a customer and an effective means to quickly respond to their inquiries. But not only that. Conversational experiences powered by bots even have the makings to change the way we handle commerce on mobile devices. To take an idea for a messaging experience to a final design, the design team behind Layer offers a free Messaging Design Kit for Sketch.

Messaging Design Kit

The wireframing kit includes 20 messaging screens, a set of messaging cards to create hybrid conversational interfaces, as well as a vector icon set made for in-app messaging UIs. Downloading the 34MB-heavy package is free after you've only entered your name, email and company's name. Handy. (cm)


Advertisement
Ad


7. Visual Narratives And Storytelling

People of all ages love stories, but sometimes they're just too long to read. Especially on the web, most users tend to skim through or skip sections just to "get to the point" of the story. Well, Primer Stories aims to bridge this problem with its digital storytelling platform that includes visual narratives. The featured articles do not only have well thought-out illustrations and animations, but also sounds to engage the reader as much as possible.

Primer Stories

Take a look around — we're sure you'll find a good number of stories that'll spark your interest and keep you on the site for a while. It won't take long to discover some really complex ideas that are portrayed in such an easily digestible format. Storytelling taken to yet another level! (il)


8. Interactive Timeline... In Dots!

Dots, dots, and even more dots. But these are not just any ordinary dots. Every dot is a historic event, so you can just imagine how the whole picture looks like if you step back and take a look at Histography. This impressive interactive timeline spans across 14 billion years of history, from the Big Bang to 2015. What started out as a simple project in the Bezalel Academy of Arts and Design by Ronel Mor, has now turned out to be a leading example of how creative timelines can actually be.

histography

All of the historical events shown in the interface have been drawn from Wikipedia, but even new recorded events are added on a daily basis. Not only does it allow you to skip between decades to millions of years, but you can also choose to watch a variety of events which have happened in a particular period or target a specific event in time. Currently supported only in Chrome and Safari though. Not quite clear why though.(il)


9. 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

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!

10. New On Smashing Job Board

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

  • Senior Front-End Developer (m/f) at Smallpdf (Zürich, CH)
    “Join the Smallpdf team to develop the first PDF software people actually like. We have over 9 million monthly users who love our product and we are growing fast. With our true passion for design, engineering and business, we want to become the most used and loved PDF software in the world.”
  • Software Engineer, Frontend at Zalando SE (Berlin, DE)
    “We live Radical Agility. With the set of principles that we give to you and your team – Autonomy, Mastery, Purpose – we entrust you to shape the future of Zalando. You will be the one changing the world's opinion of tech and fashion in Europe.”
  • Digital Marketing Manager at Liforme (London, UK)
    “As Marketing Manager, you will be responsible for planning and delivering brand-orientated creative content and executing a strategic marketing plan to help drive and support our company's growth in a global market.”

11. Smashing Highlights (From Our Archives)

  • "Web Design Is Dead." No, It Isn't.
    Every now and then we see discussions proclaiming a profound change in the way we design and build websites. Be it progressive enhancement, the role of CSS or, most recently, web design itself being dead. All these articles raise valid points, but they often lack objectivity and balance, preferring one side of the argument over another one.
  • How To Profit From Selling Digital Products
    At the end of 2012, I was talking with a good friend of mine who runs a small custom woodworking company. We were discussing business over the last year and a few things we learned. While his business did about double the revenue that mine did in 2012, I made considerably more profit.
  • How To Launch Anything
    Launching a new product — especially your first — can be incredibly daunting. Even knowing where to turn for help can be hard. So many blog posts are full of free advice on how to successfully launch that I almost didn't write another one. But many of the posts I read for my first product launch didn't help me very much. The material was too fluffy, the marketing ideas were vague, or the advice didn't apply to my tiny business.

12. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.


Editorial image credit: opensourceway

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), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser