In times of smart, beautiful UIs, we’ve become quite picky about the tools we use and how we use them. However, even if we know that a service is suboptimal at best, sometimes we are ready to endure some pain if the value we receive from it is significantly higher. Some companies have a pretty bad reputation, yet their customer base doesn’t seem to disappear over the years, but grows steadily instead, i.e. Value > Pain.
And this is where the magic opportunity for us, as designers and developers, lies. Everybody wants to have a delightful experience, so by sparking a bit of delight here and there into our interfaces, making them a bit funnier, forgiving, rewarding and perhaps surprising; we can gain the customer base that is just waiting for a better, hassle-free experience. In other words: Delightful UX + Value > Value > Pain.
There are good examples out there, too. Hipmunk4 lets you sort flight options not just by pricing but also by agony (the amount of pain you have to endure during the flight), and you can also select hotels by ecstasy levels, i.e. how remarkable you want your hotel experience to be. KLM, the Dutch Royal Airline, has introduced Monday’s Mystery Tickets5, allowing its customers to buy tickets not knowing the destination and hence turning a sometimes exhausting booking process into an exciting experience of its own.
The next time someone wants to turn your attention to the latest features they provide, perhaps you could argue about the value and importance of delight compared to these new features. And you don’t have to be a psychologist or a rocket scientist to make people smile — sometimes an unexpected surprise, attention to detail6, or just an ice cream would do.
— Vitaly (@smashingmag)
Table of Contents
- Optimizing Your Images And Workflow7
- Using The
:targetSelector For Alternative Layouts8
- The Good Ol’ Calculators9
- Free Apps: Don’t Reinvent The Wheel10
- Your Multilingual Photoshop Helper11
- Hamburger Menus: A Good Choice?12
- Color Up Your Day!13
- Patterns From High Above14
- A Hundred Happy Days15
- Full-Day Smashing Workshops16
1. Optimizing Your Images And Workflow
Limited bandwidth on mobile makes it essential for us not only to keep the number of assets we send out to devices low, but most importantly to properly optimize our images. Photoshop offers a decent solution with its “Save for the Web” option to help reduce file size of JPGs, PNGs or GIFs. Unfortunately, opening a large amount of images with Photoshop can take quite a lot of time.
Furthermore, the “Save for the Web” option has by default a rather impractical short key. Luckily, the folks at Yummygum came up with a simple way to improve your workflow18. It’s simple as that: create a Droplet in Finder and convert images by dragging and dropping. Head on over right away and start working more efficiently today! Also, don’t forget to save JPEGs as progressive JPEGs and use TinyPNG19 and JPEGMini20 for better lossless compression. (ml)
2. Using The
:target Selector For Alternative Layouts
:target selector has become famous as a technique for toggling simple drop-down menus. Vasilis van Gemert realized that it could also be used for showing an alternative layout, e.g. change a one-page layout with sections that fill out the entire viewport to a grid system with all sections on display.
:target pseudo-selector. Moreover, this technique doesn’t require loads of additional code: only 4 lines are used22 for this little use case example. Include an
id in your HTML and simply apply
:target in your CSS with the appropriate code your alternative layout. (ml)
3. The Good Ol’ Calculators
Have you ever seen someone hit the Clear button multiple times (even though hitting it once is enough) when using a calculator? What makes them trust the button less than the other buttons? Is there some sort of feedback mechanism that’s missing? Even if it’s just a habit, how does one end up developing it?
In case you’ve missed it, there was an extensive discussion24 on this particular topic not so long ago. The good ol’ calculators are not to be underestimated; many folks start using calculators at a young age, and more so when they get older. However, there still remain a few things that would make that piece of device less confusing. In other words, ever thought about how calculators would be better off with a better user interface25? (il)
4. Free Apps: Don’t Reinvent The Wheel
The web keeps changing and growing, and sometimes it feels like we can’t keep up to deliver the newest and best apps in order to make our users happy. Luckily, the friendly folks at Filament26 share their apps, such as the possibility to drag and drop your favorite apps such as Flare or Google Analytics to your website. Simply head on over, sign up for free and start adding. It works with any site and any CMS.
Another useful library is Cody28 which offers an entire collection of goodies such as cross reference tables, login/signup modals, content filters or a simple back-to-top overlay button that will greatly and simply enhance any web project. So, the next time you catch yourself reinventing the wheel, save yourself a headache and try doing things differently for a change. (ml)
5. Your Multilingual Photoshop Helper
Sometimes a good Photoshop plugin is designer’s best friend. Well, have you heard of Kaku29, yet? If a project requires you to juggle with different languages, this little plugin is bound to make your workflow more efficient — by translating any text layer you wish to a different language, especially if you are working on a multi-lingual project.
Once installed, all you have to do is simply select the language you’re using and the language you’d like to translate to from a drop-down menu and… ta-dah! Kaku will add an additional layer with the translated text to your document. Nifty! (cm)
6. Hamburger Menus: A Good Choice?
The so-called hamburger navigation menu has become a quite popular solution to save screen real estate on mobile devices. However, as compelling as it might be, before you commit to this pattern you should become aware of the consequences it might possibly bring along. Hiding elements in nav flyouts could even result in a lower user engagement, as user testing has shown, since they are hard to discover and not glanceable.
A highly recommendable read on this topic that does not only cover the problems but also reflect about possible alternatives to the burger is Luis Abreu’s article “Why And How To Avoid Burger Menus32“. Thought-provoking ideas also come from Brent Jackson who has written about the design pattern already a year ago and recently took it up again in his “Update On The Hamburger Menu33“. And don’t forget Luke Wroblewski’s guidelines for mobile navigation34. Interesting thoughts that might fuel a discussion of that “hamburger” icon for your next project. (cm)
7. Color Up Your Day!
Need a break? Need some color and inspiration? Need it right now? If you’re willing to stop whatever you’re doing in exchange for seeing something both beautiful and bizarre, it’s just a click away… Hit Blule35 and you’ll find yourself in a fascinating mingle-mangle of shiny superheroes and shady beasts who hang out with romantic princesses with shoe issues and (unimpressed) cats. Accompanied by quirky robots, slaphappy lego avatars, and so much more.
Blule is the brand and superhero mask of Sydney based designer and illustrator Clémentine who showcases 100+ stunning watercolored paintings of all kinds of characters. Secret ingredients: A bit of time, a lot of inspiration and so much love. If you love what you see, how about getting a daily dose with fresh illustrations directly into your inbox? Color up your day and don’t miss how it’s made37, too! (ea)
8. Patterns From High Above
Inspiration is all around us. If you travel a lot or even live near an airport (as Brooklyn-based designer Lauren O’Neill does), you’re probably fascinated by the comings and goings, as well as the entire organization and structure of airports. No? Well, you should. Most of all, you’ll be surprised what an airport looks like from above!
These satellite shots of airport patterns around the world were so intriguing to Lauren, that she decided to start a Tumblr blog which she has named “Holding Pattern39“. Whether DCA, JFK, or the little municipal airport, a lot of the taxiway markings and linework are patterned across the airports’ tarmac. Lauren O’Neil turns those patterns into art, with the help of Google Maps. It’s interesting to see such impressive pictures of airports that don’t appear to be that special at ground level, isn’t it? (il)
9. A Hundred Happy Days
Life can be a field of flowers or a battleground. It can be happy and it can be sad in one single day. Why not try and think of today and count how many happy moments you’ve had so far. Perhaps you took a quick swim in the ocean this morning with the whales? Well, maybe not, but maybe you just saw a beautiful flower on your way to work, or were smiled at from a passerby and that made you happy? At the end of the day, it’s the small things, isn’t it?
What if the secret to happiness is simply the ability to embrace a single moment? Now here comes the challenge: do you think you could appreciate at least one moment a day in a hundred days in a row41? We’ve found a place where 71% folks tried to complete this challenge, but failed quoting lack of time as the main reason. Come on, we can do better! There’s always time to make ourselves and others happy — you just need to know how. (ea)
10. Full-Day Smashing Workshops
With so many techniques, tools, libraries, 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 front-end and RWD workshops are all about: full practical days that will help you become a better front-end expert, today.
Here are a couple of practical, hands-on workshops you may want to consider attending:
- RWD for the Photoshoppian43 with Dan Rose (NYC),
- CSS Architecture44 with Jonathan Snook (NYC),
- Responsive Email Newsletters45 with Fabio Carneiro (NYC),
- Clever RWD Tricks And Techniquess46 with Vitaly Friedman (Karlsruhe, DE).
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly[at]smashingconf[dot]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! (vf )
The authors in this newsletter are: Melanie Lang (ml), Cosima Mielke (cm), Esther Arends (ea), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://alistapart.com/article/creating-style-guides
- 3 https://www.flickr.com/photos/polledemaagt/14124798488/
- 4 http://www.hipmunk.com
- 5 https://mysteryticket.klm.com/nl_nl
- 6 http://littlebigdetails.com
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 #a10
- 17 http://blog.yummygum.com/post/86403610844/pro-tip-quickly-export-your-psd-files
- 18 http://blog.yummygum.com/post/86403610844/pro-tip-quickly-export-your-psd-files
- 19 https://tinypng.com/
- 20 http://www.jpegmini.com/
- 21 http://nerd.vasilis.nl/using-target-pseudo-selector-alternative-layouts/
- 22 http://nerd.vasilis.nl/using-target-pseudo-selector-alternative-layouts/
- 23 http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a-calculator
- 24 http://ux.stackexchange.com/questions/11660/why-do-people-clear-the-screen-multiple-times-when-using-a-calculator
- 25 http://uxmovement.com/thinking/why-calculators-need-a-better-user-interface/
- 26 http://filament.io/
- 27 http://filament.io/
- 28 http://codyhouse.co/
- 29 http://kaku.ps/
- 30 http://kaku.ps/
- 31 http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
- 32 http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
- 34 https://twitter.com/lukew/status/443440251042676737
- 35 http://boutique.blule.fr/
- 36 http://blule.fr/colourupyourday
- 37 http://boutique.blule.fr/pages/how-it-is-made
- 38 http://holding-pattern.tumblr.com/
- 39 http://holding-pattern.tumblr.com/
- 40 http://100happydays.com/
- 41 http://100happydays.com/
- 42 https://www.smashingmagazine.com/workshops/
- 43 https://shop.smashingmagazine.com/smashingconf-ny-workshop-dan-rose-resonsive-photoshoppian.html
- 44 https://shop.smashingmagazine.com/smashing-conference-new-york-workshop-jonathan-snook-smacss.html
- 45 https://shop.smashingmagazine.com/smashingconf-ny-workshop-fabio-carneiro-newsletter-design.html
- 46 https://shop.smashingmagazine.com/smashing-workshop-friedman-responsive-design-karlsruhe.html
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.