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.
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
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?
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.
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.
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
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 (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 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.
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
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.
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.
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
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.
- Desktop Wallpaper Calendars: July 2016
- Freebie: Months And Seasons Set (12 Vector Illustrations, PNG, SVG, EPS, AI)
- Accessibility Matters: Meet Our New Book, "Inclusive Design Patterns" (Pre-Release)
- Web Development Reading List #142: Contextual Identities, Form Hints, And ApplePay.js
- Web Development Reading List #143: The Referrer Header, Third-Party Scripts, And Color Psychology
- A Lean Approach To Product Validation
- Ten Requirements For Making Home Page Carousels Work For End Users (If Needed)
- Quick UX Prototyping With Adobe XD Shortcuts (PDF Cheat Sheet)
- Web Development Reading List #144: CSP Mistakes, JS Debugging And Failure Testing
