Designing The Perfect Accordion

Design patterns. An almost mythical phrase that often inspires either awe or resentment. As designers, we tend to think of design patterns as generic off-the-shelf solutions that can be applied to various contexts almost mechanically, often without proper consideration. Navigation? Off-canvas! Deals of the day? Carousel! You get the idea. Sometimes we use these patterns without even thinking about them, and there is a good reason for it: Coming up with a brand new solution every time we encounter an interface problem is time-consuming and risky, because we just don’t know how much time will be needed to implement a new solution and whether it will gracefully succeed or miserably fail in usability tests. Design patterns can be extremely helpful, mostly because they save time and get us better results, faster. We don’t need to apply them exactly as they are to every problem we encounter, but we can build on top of them, using our experience to inform our decisions because we know they’ve worked in other projects fairly well. Over the last few years, I spent a lot of time working with various companies trying out various approaches and studying them in usability tests. This series of articles is a summary of observations and experiments made throughout the time. Tighten up your seat belts: in this new series of articles on SmashingMag, we’ll look into examples of...

Read More

Connecting With Users: Incorporating Humor In Web Design

Joan is applying for a small loan on all-online-loanzzz.com. She’s becoming frustrated with the number of financial-disclosure forms she has to fill out. She’s thinking about visiting her local bank to ask for a loan instead. While waiting for a page to load, the application presents a cartoon image of a person wearing a business suit sitting in a jail cell. The image caption says, “Hey, everyone hates disclosures. We know you do, too. We’re doing our best to keep everyone out of jail. Please bear with us for a few more clicks. You won’t regret it, and our loan officers will stay out of jail.” Joan smirks at the image. She might not appreciate the number of forms she has to complete, but she understands the serious nature of applying for a loan. Humor is an important aspect of life. Researchers find humor has many positive benefits1. It can reduce stress, increase psychological well being and increase tolerance for pain. Most of us have had experiences in which we’ve used humor to lighten a mood or cheer someone up. Humor is integral and inherent to human relationships. 2We can use humor to enhance our users’ experience. (Image: Brandon Sax3) (View large version4) You can use humor in your design (both in the process and the product) to create a positive user experience. We want to develop positive relationships...

Read More

Designing Mobile Marketing Experiences For Millennial Shoppers

The average American spends at least five hours1 per day on their smartphone. So, why is it so hard to make mobile ads work? Marketers toil over clicks and conversions on highly targeted ads, but users, tired of intrusive banners, keep installing ad blockers. With $100 billion in annual mobile ad spend at stake2, someone has to figure out a way to fix this disconnect. The good news is that the latest mobile trends show promise that publishers and advertisers are getting smarter about the user experience. Google is working to recapture lost attention with a crackdown on mobile popups, and marketers are easing off of aggressive acquisition strategies to focus on retention. While some digital trends such as immersive VR and AR ads will take years to collect sizeable audiences, others, like mobile wallets and chatbots, are already powering millions of daily brand-consumer interactions on mobile. In this article, we’ll look at some of the biggest trends in mobile marketing. Further Reading on SmashingMag: Link Mobile Merges Digital And Offline Experiences Link Mobile payments at physical points of sale are growing in the US, with over $314 billion in payments expected by 20207. But the revenue from these purchases represents just a fraction of the value marketers will get from collecting transactional data. Retailers can now funnel data from cashless mobile transactions to CRM and personalize experience for...

Read More

Web Development Reading List #186: Tor 7, Designing Depth, And Mac Ransomare

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns. Design is one of the most controversial things in our industry. There are barely any redesigns that aren’t discussed heavily in the community. Changing a well-working design is even harder as people tend to dislike anything new, but if we give them a bit of time, they might start to see things from...

Read More

Building Production-Ready CSS Grid Layouts Today

Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development. Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways. Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design. Much has already been said about the technical aspects of CSS grid and its one-dimensional cousin flexbox by people smarter than me. In this article, I want to bring these concepts into practical use. What you’ll get is a starting point for exploring what new layout opportunities and challenges CSS grid brings, what old problems it solves and how to start using the module in production websites today. My examples and focus will be on WordPress themes, but the practical approaches and code examples are agnostic and can be used in any web project, regardless of CMS, technology stack or tool. Further Reading on SmashingMag: Link...

Read More