Project management tools are obsolete
Dapulse is the next generation of visual tools, built for designers and developers.
Interesting articles from the web…
Dapulse is the next generation of visual tools, built for designers and developers.
What could be so difficult about designing a decent date picker? Basically, we just need an input field and an icon that represents a calendar clearly enough, and once the user clicks on that icon, we pop up a little overlay with the days lined up in rows. Right?
Well, not every date picker fits every interface, just like not every interface actually needs a date picker. But when a date picker is required, quite often it’s just a bit too tedious and annoying to specify that one date, and too often it produces irrelevant results or even a zero-results page, although just a few minor refinements would make it much easier to use.
Over the last few years, I’ve 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 that time. Over the course of months, we’ll be exploring everything from carousels to car configurators. Having looked into the design of accordions1 two weeks ago, let’s look into the design of date and time pickers today — in all the various facets and flavors of their visual appearance and interaction design.
First things first, though: Date pickers are often considered to be a foolproof component for date selection — predictable, consistent, generic — and so more often than not, we use them just because they seem to be a universally accepted pattern for date input. But just like any other form element, sometimes they should be the method of last resort, aiding the user’s input if it can’t be inferred in a better way. Now, there are situations where date pickers are extremely helpful, and there are situations where they just slow users down. Our job, then, is to carefully study our own scenarios and figure out an optimal way to frame the question of time and date to help users provide the input quickly and easily.
The best input is the one that matches the user’s intent, without having to ask the user to be precise, of course. But what if we set a budget on the date input as at most two taps? Three taps for a date range? Five taps if we bring a time slot into the game as well? You might be wondering if it’s really a big deal; after all, it’s just a tiny little date picker! If date selection is front and center in your interface, you should expect users to use it a lot, and going to extremes to optimize date input isn’t really a matter of optimization, but is rather a core element of your website’s experience.
In fact, there are plenty of contexts in which date pickers matter: whether it’s for a medical appointment, a spa treatment, a boat rental, a TV guide, online banking, a flight ticket or a summer cottage rental — pretty much anything that requires date input is likely to have some sort of a date and time picker. And more often than not, all such websites tend to use the same (jQuery) implementation, plugged into the UI a while back and happily forgotten ever since. However, it might not be the best option for your particular case.
If we look closely at the nature of a date picker, there are a good number of design questions to be resolved — and many of them aren’t straightforward at all:
Indeed, we have many decisions to consider, and most of them aren’t that straightforward at all. But let’s tackle one issue at a time. The main question we should ask ourselves first is what problem and in which context exactly are we solving and how can a date picker help there or, more specifically, what kind of a date picker would help users move forward in completing their task seamlessly.
Before choosing an interface pattern to apply to your problem, it’s important to understand what kind of date input you actually need. Is it enough to know just one day, or do you need a date range? The latter doesn’t mean that you have to use two date-pickers, though, but it will affect the interaction and the design of the component.
You might also want to extend the date picker with a time input, but it doesn’t mean that the experience has to happen in steps — date picker first, time picker second. There are also ways to integrate both the day and time selection in one single component. We’ll explore some of them later in the article.
Beyond that, it’s a good idea to look into the expected range of values that your visitors will most likely type in. Perhaps you’ll need to extend the date input with a set of predefined options, or limit the range of accepted values, or complement it with numerical input so that customers can type in the values manually. In fact, the latter option might be useful more often than not — the problem is that it’s quite difficult to get right.
One thing is certain: If you’ve been considering a date picker, chances are high that, you know, you need some sort of a date input (duh!). You could, of course, use three separate numerical inputs, separated by a separator symbol — perhaps a <select>
dropdown for the day, month and year — but with that design, users will embark on a journey through tapping and scrolling, which isn’t necessarily the most seamless or fastest experience. We want the date to be chosen as quickly as possible, and being able to set the date with two taps (tap to open the calendar, and tap to pick a day) would be much easier than dealing with three separate input fields.
select
dropdown for date selection. It prompts a long scrolling area and might not be the fastest way to input. (View large version7)All right, then. What if instead of three separate inputs, we keep only one — perhaps with the format helper DD/MM/YYYY
, for example? As the user starts typing, the transition between day and month and year should happen seamless and automatically, so that the user wouldn’t need to do anything but keep typing on the numerical keyboard. Ideally, they’d be finished with the input after, at most, eight keystrokes. Obviously, we can’t assume whether the user knows the exact date, but it would be useful to make precise input possible, complementary to a regular date picker. Especially in interfaces where the date input can vary a lot (such as with passport expiry dates), typing the value instead of endlessly tapping through years and months just sounds more reasonable, right?
Well, numerical input has to be reliable enough to manage all kinds of edge cases — and there are plenty of them. Of course, we’ll be using some sort of a label or placeholder to indicate the order of the day, month and year input and an example of the input format, but inline validation should pick up an ill-formatted input quickly and suggest corrections to drive the user forward in the input flow. Watch out for the day on which the week starts. If your company is international and most customers come from the US, then you’ll probably need to change the UI based on the user’s location or preferences to avoid misbookings.
Being reliable also means being forgiving. If the user wants to select March 1st, 2019, with the numerical input MM/DD/YYYY
, they would need to type in 01 / 03 / 19
. As designers, that’s exactly the input we are expecting.
Now, how would users type in the data when encountering that numerical input? If you observe users typing in a date in an input, you’ll see them pause for a second, type in 1
, then manually switch to the month input, type 3
, then manually switch to the year input and type the year — either 19
or 2019
.
Other users will play it safe and type in 03
and 01
explicitly. Still others will try to include a separator sign in either of these inputs. Because in some implementations the placeholder disappears once the input is activated, some users will use a different separator sign than the one you’ve accounted for — often a hyphen (-
) or slash (/
). Some users will try to increment the value by using the up and down arrows in the input fields. And some users will choose to tab through the fields when typing in the date. Oh, what a nightmare it is for inline validation!
Why do users do this? Mostly because they have been burned in the past — by clunky interfaces whose data input was designed poorly, resulting in a frustrating experience of going back and forth — for example, seeing an incorrectly interpreted input, then hitting a tiny day or month selection input to correct it, but ending up resetting the other input as a result. In all of these cases, it’s easy to get frustrated. And in all of these scenarios, the designer’s implementation should be able to properly interpret the input and support the user, rather than throwing errors left and right (with autocomplete or smart suggestions).
Keep the date format suggestion (in the placeholder) when the user activates the input field. Keep the delimiters and placeholders displayed as the users manually inputs the date. If that’s not possible for some reason, use a floating label to continue displaying the format (this does have some accessibility issues12, but there are some13solutions14 as well.)
Numerical input matters in cases where the range of input varies widely — potentially spanning years, such as visa validity dates, or accounting for predictable input, such as birthday dates. That’s where it’s worth investing into a proper numerical input. You could even take it to the next level, supporting actual context-sensitive input. Perhaps instead of asking for a specific input format, you could support queries such as “yesterday,” “now,” “today,” “next Friday,” “one year ago,” “two weeks ago” or even “5 days into July.”
Depending on the nature of your application, allowing for flexible dates might be useful, and typing the query in the input field would be easy enough. If that’s not possible, then it might be a good idea to add easily tappable, predefined options for “today,” “tomorrow,” “in 7 days” and so on alongside the date picker. It could be useful when searching for the optimal fare for an airline ticket. In fact, that’s exactly the technique that Kremlin.ru1817 uses. Of course, you also need to communicate that you support this kind of “smart” fuzzy input prominently as well.
While numerical input is useful and it’s good to have it available as a fallback, in some situations a date picker is infinitely more useful — for example, when the customer is booking a short vacation. What if the user is looking for a quick weekend trip within the next six weeks, but they don’t have exact dates in mind — instead, they are exploring pricing and availability, which means they will be jumping between days and weeks, and potentially even months, a lot. In such cases, numerical input would be way too slow and tiring, whereas a calendar view would be way more relevant because it displays weekend options lined up in a grid upon a tap.
If we examine the interaction with the date-picker input field a bit closer, we’ll stumble upon a number of micro-decisions around its interaction design. Should the input field have default values, or should it be left blank, perhaps populated with a date placeholder, showing an example of the correct input? If we do use default values, which values do we choose? And once the user has selected dates but refreshes the page, should the input be persistent in the fields or reset automatically?
Frankly, we didn’t test, nor did we spot any preference for, any of the options above, but it seems that setting random values for the customer isn’t really the best option because it would force customers to “fix” the values from the seemingly random ones to the ones they are actually looking for. However, if your customers are likely to buy last-minute deals on your website (be it shows, public transportation or hotels), then the current date (“today”) or even current time (“now”) might be a good option — especially in a time-sensitive context, like a TV guide. The final decision will come from the general behavior you’ve gathered from your frequent customers.
Once the user has selected dates or time slots but refreshed the page (accidentally or deliberately), we can choose to cancel the selection or keep it as is. If the user accidentally refreshed, they won’t be delighted about their input being lost and having to retype it again. That’s frustrating. If the user deliberately refreshed, they’d see predefined dates and have to “fix” the dates. This can be quite frustrating as well, unless you provide a noticeable “Reset” or “New search” link next to the date input. Instead of manually deleting all of the previous input, the customer can clear the selection with one tap. This is also where a mini-stepper could be helpful as well, as dates might not change significantly. In that latter case, adjusting the date using two native scroll wheels, for example, would be just way too annoying.
In a nutshell, it’s a good idea to prepopulate the dates only if you are certain that the user is likely to choose these dates; also, persist data after a page refresh (unless the input is time-sensitive), and add a “Reset” link to enable the user to cancel their input easily. By the way, that reset link should probably be available in the calendar overlay as well.
One might think that you’d need to be really creative to come up with a distinct design for the calendar overlay. After all, they are so generic most of the time! Usually, the overlay appears under the date-input field, and mostly as a full-screen overlay on narrow screens and as a smaller panel on the desktop. The days are lined up in rows, grouped as weeks, with drop-downs to navigate the years and months. However, as it turns out, a calendar overlay could contain various level of detail and navigation.
The simplest question is, should the week row start on Monday or Sunday? Well, it depends on the service you are providing and the audience you are targeting. Should a date picker always contain the year input? Probably not on a public transportation website, a TV guide or a food delivery service. Should you display all day options and month options all the time? Probably not if you are designing a car rental website — you probably wouldn’t need to book a car more than a few months in advance. And if you are using these services in months when the next year could be an option — such as in mid-December — you might get away without displaying the year, because January would obviously be January of the upcoming year.
There is another level of complexity to it, though. In some situations, displaying an actual day of the week (Monday, Tuesday, etc.) is important (for example, for booking an appointment). In other situations, it’s irrelevant (such as for a birthday). Sometimes we do want to display availability or pricing (such as for booking a flight). And sometimes we want to know a date range (for renting a summer cottage) or an exact time slot (a restaurant reservation), rather than just a date. In such cases, we need to complement a date selection with a time-slot selection, or indicate the connection between the start date and end date somehow.
It’s worth considering the level of detail to provide in your date picker early on to help users make an informed choice more quickly. If availability matters, consider clearly separating available and unavailable options. Additionally, if there are different options or price tags associated with different dates, then it might be useful to color-code to indicate better fares or better availability. If many customers are booking your services over the weekend, clearly indicate weekends and, potentially, public holidays.
What would you choose to highlight for a selected day in your interface? Perhaps availability on that day? Maybe different opening or closing times? The kind of show running on that particular day? It’s also a safe bet to restrict or disable certain selections, or at least provide a hint right away in the calendar if a selected date range won’t bear the expected result.
Figure out the critical detail that’s important to your customers and expose it prominently — for example, with gray dots (to denote unavailable) and green dots (available). The latter could appear in different sizes, for different grades of availability. It doesn’t have to be a full-detail view, though — potentially, even a color gradient overlay would do the job, with a list detail view that could be progressively disclosed once the date is selected.
It’s easy to get lost among all those fine features and indicators, but it’s also critical to get the basics right first. Don’t forget to indicate the current day, so that customers can easily see the relationship between a remote date and the current date.
Obviously, you will need the day and probably the month most of the time, but you might not need to display the year all the time. Or at least, if the year isn’t used that much, it doesn’t have to be as prominent as the other input, and perhaps appear only when needed, with some sort of progressive disclosure. In all of these cases, you’ll also need to include some sort of navigation between days, months and years. It doesn’t have to be only a select
drop-down though.
For date selection that is not so fixed, such as a wedding date or the beginning of employment, you might want to look into a more dynamic input that would complement a good ol’ date picker — for instance, a mini-stepper.
If many customers are likely to explore a quite short range of date options, you could add quick “previous” and “next” navigation next to the day input right in the input field. For example, when booking a weekend trip, a user might want to leave either on late Thursday or early Friday, but late Saturday is definitely out of question, so instead of retyping the input or selecting the date in the calendar overlay, a single tap would produce the expected result.
In fact, that’s exactly what Google Flights38 uses as an addition to its date-range picker. To be able to jump quickly between months and years, you could add a mini-stepper for them as well (again, think how quick the change of the date would be for a passport expiry input).
In general, a mini-stepper is a good enhancement for every date picker. However, it probably shouldn’t be considered a replacement for a calendar overlay. Of course, tapping is easy; but it can also get very tedious very quickly. In usability sessions, you can see how the annoyance level (and blood pressure) increase with every tap after the 10th tap. Eventually, some users switch to numerical input instead altogether (if it’s possible, of course).
So, what to choose? Study the purpose of the calendar and the scope of the date input range first. If the date is likely to be quite far in the past or the future (for example, for booking a vacation), then a numerical input with a date picker might be a good option. If the date input range is usually quite short (less than six weeks, such as when booking a medical appointment), definitely consider adding a mini-stepper for quicker jumps.
Ideally, providing all three options — a numerical input, a calendar overlay and a mini-stepper — seems to be a safe bet, as long as numerical input is reliable enough. If there are only a few options to display at a time, then perhaps a date picker isn’t necessary for your interface at all. Consider displaying predefined options as links, buttons or perhaps even a slider, instead of prompting a calendar overlay.
Date input doesn’t necessarily require a date picker, but usually a date picker is a good solution. However, not all date pickers are created equal, and interaction design will vary quite significantly depending on the context. One thing is certain, though: Unless the date picker is displayed as is in plain sight, it will have to be prompted by a click or tap on an input field or a date picker icon (usually some sort of a calendar icon).
Here’s another question: Should the overlay appear when the user chooses to click on the calendar icon or on the input field — or both? Of course, if numerical input is possible, the click on the input field shouldn’t trigger the calendar. However, if that’s not the case, the entire field should trigger the date picker overlay. But maybe we should treat the use case of a user manually prompting a date picker as an exception rather than a rule for interaction with our interfaces?
It’s quite remarkable that in many interfaces, date selection is usually not the very first data that the user is asked for. For some mysterious reason, it is often preceded by other, often more general, input.
For example, booking interfaces usually ask users about the destination of their journey before asking for the dates. While the calendar overlay should, of course, be triggered by a tap on the icon and in many cases the input field, what if it was triggered automatically once the user finished the preceding input?
Ryanair57, for example, seamlessly drives the user forward through the input, displaying the date picker automatically. When the initial date selection is done, the second date picker for the end date is triggered automatically. In an ideal scenario, then, defining a date range takes just two taps, unless you have to switch between months. The interface takes care of this issue: At any point of time, the date picker displays the view with two months at a time (on both narrow and wide screens). Because most journeys are unlikely to span more than two months, jumping between months is often not necessary, and input can be achieved much faster. Unfortunately, the website is hardly accessible, which makes input literally impossible with voiceover.
The selected range is visualized immediately by connecting the dates visually in the calendar with a background color change. This range should be announced by a screen reader as well when a selection is made.
This simple technique boosts completion of the date-range input because no click or tap on the date-input field or icon is required in the entire interaction. By always moving forward in the form, the user never has to actively switch or think about the date selection — everything is literally just a tap away.
It’s all good if a date picker is used every now and again, but what if you wanted to really power-boost the experience for your frequent customers? What are the common issues that keep appearing? How can interaction with a date picker be designed even better?
That’s where we need to dive slightly deeper into the features and functionality that a date picker might provide. What if you included keyboard shortcuts to enable keyboard-accessible selection of the date and movement by days, weeks or months? It might be helpful to be able to jump to the first or last day of a week, and to escape to the date input field.
That’s exactly what Airbnb does. In fact, Airbnb’s date picker is open-sourced66 and can be used right away as a React component — comprehensive and bulletproof, and it supports localization as well. If your customers are relying on a date picker, enabling them to jump between dates via keyboard shortcuts does have a learning curve, but it could be a real boost. It would be quite difficult to make a date picker more powerful than that.
When we think about date selection, we probably imagine a couple of input fields along with a calendar overlay. Date selection doesn’t have to use form elements at all, though. Here’s an idea: What if we used a conversational interface with smart defaults, asking the customer to either type or choose the day, month and year — obviously, with a date picker, just in case the date doesn’t come up in the overview of predefined options. Adhithya Kumar built a quick Invision mockup67 of what the basic interaction could be like. You’ll find a couple of examples of such interaction below as well.
In some situations, asking for the exact date might be overly specific and unnecessary. For instance, a food delivery service might benefit from quick shortcuts to “tonight,” “tomorrow morning” or “Monday,” rather than a calendar overlay. Museum website could offer tickets for the next few days (“today,” “tomorrow,” “weekend”) and a calendar overlay for more precise input. In fact, you could explore most frequently used timeframes and suggest quick shortcuts to the most common selections.
The National Geographic schedule page76 highlights shows prominently, grouping them by time. A little switcher in the left upper corner switches between daily and weekly views. The mobile view is not available, but it could easily display daily view on mobile (by default), with an option to switch to weekly view, and the other way around on desktop. Common selections (“Early morning”, “Morning”, “Afternoon”, “Primetime”) are extracted from the time picker — a precise input isn’t necessary.
If your date input should be even fuzzier than above, or your customers sometimes don’t have a specific date in mind, a date picker should probably be the method of last resort. More often than not, a couple of presets and general suggestions, combined with filters, would work way better than browsing months and years ever would.
In that case, you could still provide a detailed calendar view, displaying all options at once, and using color coding, for example, to indicate best prices. In fact, that’s what Google Flights7977 displays when flexible dates are selected. However, the option is dropped on narrow screens altogether.
Dohop888581, on the other hand, uses not only flexible dates but also flexible location as the main feature, prominently highlighting both features as the user starts typing in their destination or date. Instead of the price, the calendar view highlights the availability of direct and indirect flights, as well as whether there are flight days with no connections (based on the user’s defined departure days, for example).
Just like any other input, a date input can also be accomplished by moving the knob of a slider. The good ol’ slider can be used either for a single value input or to specify a date range, and indeed it’s often featured in interfaces where the customer can set a predefined range of dates.
A discussion of sliders deserves another article, but the main problem is that too often they just don’t allow for precise enough input90. The wider or the denser the range selectable through a slider, the harder it is to use. In usability tests, you’ll see users desperately try to set the exact date in a slider by moving the knob very carefully and very slowly. If we think about the date or time range — which can vary a lot, and encompass months or a wide range of time slots — then picking one of the options can become quite an adventure on narrow screens.
Sliders seem to work best when the specific value does not matter much, or when you have a very limited set of options to scrub through. Unfortunately, it won’t be the case for most date pickers, especially when the date is adjusted and refined quite frequently.
At this point, you might be wondering whether all of that effort and all of these considerations are actually worth it. Why not use native93date94pickers95 — isn’t that exactly what they are intended for? Besides, because they are native, they will look and behave consistently with the user’s expectations anyway.
The problem with native date pickers is that they are very limited in their design and functionality. For example, it’s impossible to add any details such as availability or pricing to a native date picker to avoid zero-results pages. It’s also impossible to select a date range and highlight the connection between two dates because it doesn’t provide a calendar overview.
Just like with regular numerical input, the starting point and end point require two separate date pickers. Scrolling through dates is predictable and consistent, but because selection requires precision, they become very annoying very quickly in usability interviews. Also, native date pickers aren’t supported in desktop browsers, and so you still would need to design the experience for larger views, essentially transforming a <select>
menu into a calendar overlay anyway.
Does it mean that using a native control is always a bad idea? Not at all. If the date input in your case is faster with native controls, and you don’t need a calendar view, then using a native date picker is absolutely reasonable. In fact, while numerical input might have formatting issues due to differences in day formats, the user is more likely to provide proper data quickly this way because native controls cater to the user’s mobile device. However, whenever you need slightly more than just an exact and “stable” date, such as a birthday, then native date pickers seem to hit their limitations quite quickly.
Things get slightly more complicated when, in addition to a date picker, you also need to provide a time-slot picker. The easiest way to achieve time selection would be by providing an extra input field as a step after the date has been selected. This brings us back to square one again: That input field could support manual input, or contain a mini-stepper, or prompt a custom drop-down, or appear as a slider or be a native <select>
menu.
But what if we look at this issue from a slightly different perspective? Now, a typical example of an interface with a time picker would be booking an appointment or a restaurant reservation. In these cases, both the date and time matter, but sometimes the date matters a bit more, whereas other times, time matters a bit more. One thing is certain, though: Choosing a date isn’t helpful if there are no appropriate time slots on that day. Wouldn’t it be more reasonable, then, to ask for the time slot first, just to display all available days with the time in question (or closest slots) for quicker selection? In that case, time selection acts as a filter to remove all unavailable days.
In fact, when it comes to appointments, a good number of users have a certain time slot in mind, because the day might be packed with work time and family matters. The selection of time, then, can’t be a radio button, but rather a multi-select group, allowing for various options at once.
In fact, that’s exactly the idea that Matthew Talebi suggested107 recently. Prompt the customer to select the time range that best fits their schedule (morning, afternoon or evening), and display next available appointments in a list, available for booking.
Alternatively, you could combine date and time selection in one screen as well. On Treatwell.nl108, customers can slide through the days horizontally while the list of available time slots appears horizontally — with the price displayed inline. That’s a slightly more compact way to combine date and time pickers in one place — and it’s quite common in TV guides as well.
Envy.rent114112 extends its date picker with a slider for selecting an approximate time slot to pick up a rented car. A precise slot doesn’t matter much in that case, but a group of checkboxes would do the job here as well.
The Calendars 5116 app uses a sort of tabbed navigation to switch between date and time selection. The panel at the bottom is easily accessible for the thumb. The time view, though, has a very unusual layout for time selection, with options grouped by daytime and nighttime, and minutes listed in a slider, basically resulting in 36 clickable buttons. A slightly better way to provide exact input would be to use a native control or progressive disclosure, where we could display only AM or PM first, and then allow users to dive into specific hour or minute input if needed.
If your problem is very specific, you might explore alternative designs altogether — the date-picker overlay doesn’t have to contain a calendar view, but could rather be a group of pre-defined buttons to “construct” the date. Alternate Date Picker122 is designed with the goal to provide the easiest way to define a date from very wide range of dates (1800–2999). The selection doesn’t require keyboard input, nor does it prompt a calendar overlay or slider. You just tap on buttons to build the date. (Thanks to Slav for heads up in the comments!)
Localization matters. Whether you are using a date input or time input, it’s critical to have some sort of strategy of how you will target specific regions of the world to avoid misbookings. You could use a combination of drop-down and numerical input to minimize the number of mistakes made, like Gmail130125 and Yahoo132126 do for input fields. But at least when it comes to the calendar view of weeks, you’ll need to dynamically switch between US-formatted dates and EU-formatted dates, for example — and potentially consider Hijri, Hebrew, Chinese and your user base-specific calendars in addition to Gregorian calendar as well. You can always check the Date Format By Country Wikipedia page127 as a reference as well.
Making one of those date pickers accessible isn’t trivial, because date selection should be keyboard-accessible and you would need to toggle between open and collapsed states. You can find an overview of accessible date pickers133. Also, consider looking into Whatsock’s examples134.
Looking back now, what can we do with a date picker? We can combine day, month and year into one input field, add a fancy calendar icon, and prompt a calendar overlay that exposes the main purpose of the calendar prominently. We could use smart inputs, a mini-stepper and flexible dates, and we could allow users to switch between week and month views or change the level of fidelity of the calendar accordingly.
We could even consider two separate views — a big-picture calendar along with a detailed list. The transition from start date to end date should be seamless and should happen without prompting a second calendar, just with a few taps. Typing in an input field might be less annoying than scrolling through the select
wheeler or jumping back and forth between months and years. And to help users find the perfect day, we can expose the most relevant detail, such as availability or pricing, in the calendar as well.
If you’re about to design a date picker, here are all of the questions you might have to ask yourself in order to choose the right solution for your problem:
If the date is likely to be quite far in the past or the future (for example, when booking a vacation), a numerical input with a date picker might be a good option. If the date input range is usually quite short (less than six weeks, such as when booking a medical appointment), definitely consider adding a mini-stepper for quicker jumps.
Ideally, providing numerical input, a calendar overlay and a mini-stepper seems to be a safe bet, as long as numerical input is reliable enough.
And that’s a wrap! Perhaps you had very different experiences than the ones mentioned in the article? Let us know in the comments to this article! Also, if you have another component in mind that you’d love to have covered, let us know, too — we’ll see what we can do!
This article is part of the new ongoing series about responsive design patterns here on yours truly, Smashing Magazine. We’ll be publishing an article in this series every two weeks. Don’t miss the next one — on fancy (and not so fancy) responsive car configurators sliders. Interested in a (printed) book covering all of the patterns, including the one above? Let us know in the comments, too — perhaps we can look into combining all of these patterns into one single book and publishing it on Smashing Magazine. Keep rockin’!
(al yk il)
Fractures * Numi * Attract hover effect * sqlify * Gatsby * Remote Starter Kit * ImageOptim Sketch Plugin * Pe…
What comes to your mind when you hear the word “business”? White collars, cubicle offices, and encrusted habits? Not when you ask the folks at Vexels161. Their Business Concept icon set manages to break free from the conceptions that are stuck in our heads and paints a fresh and creative picture instead. One that captures the liveliness of today’s startup world. And, well, we are very happy to present you the icons as a freebie.
Colorful, friendly, but nonetheless straight to the point, that’s Vexels’ take on the business subject. There are 28 icons in the set in total, depicting concepts that help a business thrive — from vision and strategy to teamwork and competition. All icons are available in AI, EPS, SVG, PSD, and PNG formats.
Please note that this icon set is released under a Creative Commons Attribution 3.0 Unported4 license. This means that you may modify the size, color, and shape of the icons. Attribution is required, so if you would like to use the icons, please do remember to credit the designers and to link to this article if you want to spread the word in blog posts or anywhere else.
“We view business as an opportunity to work with talented people, to grow and help each other out while making a great product in the process. We created this icon collection because of it. This pack is colorful and lively, it’s a set where competition isn’t seen like the enemy and creativity and innovation have an important role.”
A big thank you to the folks at Vexels161 for designing this wonderful icon set — we sincerely appreciate your time and efforts! Keep up the fantastic work!
Apple’s Worldwide Developer Conference (WWDC) has been running for 34 years, which is 6 years longer than The Simpsons. Like Netflix, Apple likes to drop a whole season at once. When it does, I devote that week and the following weekend to binge-watching as many videos as I can and trying out some of the new technology, especially as it relates to iOS.
In the past 10 years, a big portion of these conferences has been devoted to iOS. This is where we learned about the first iPhone SDK, notifications, share and today widgets, the iOS 7 redesign, iPad multitasking, and other iOS milestones. I was genuinely surprised with some of the announcements this year.
Here’s my overview of what happened this WWDC season, with code samples. But before we begin, there are some things you need to keep in mind. If you want to try out any of the sample projects, you are going to have to update your Mac to macOS Sierra 10.12.5 (the latest point release), and have Xcode 9 installed. If you are super-brave, or just irresponsible, you’ll need at least one device on iOS 11 for some of the samples to work. I fall under the irresponsible category here, but I also needed iOS 11 for my day job and to write this article, which seemed like a good excuse, but it’s not. Everything is working fine for me so far, but this is a huge risk. Don’t do it with an unbacked-up device you care about.
While you are waiting for Xcode 9 to download, go watch the WWDC Keynote9 if you haven’t seen it. If you have, watch the “Platforms State of the Union4510.” All WWDC session videos have to viewed in Safari or in the WWDC app on any iOS or tvOS device. Another great option is the unofficial WWDC app for macOS11.
This article is about the WWDC updates that matter most to iOS developers, so I’ll skim through some of the big news on other fronts.
That’s a lot, and we haven’t even gotten to the new developer capabilities in iOS 11.
Every year, iOS developers can expect some refinements to the overall system experience, and this year we got a big one: drag and drop. A lot of app developers try to do this themselves, but now iOS provides built-in support for it that supports multi-select, default animations and standardized interactions. On iPad, it even works between apps. You could say it was overdue, and perhaps it was, but we didn’t even get copy-and-paste until iPhone OS 3.
Another big addition to the system is that files are now more of a first-class concept. You can browse your device’s documents in the Files app (which includes cloud-based documents from iCloud Drive and third-party services), but, also, any app can bring up a file browser for the user to pick files from.
You can see these and more in the “What’s New in Cocoa Touch4617” session.
The new drag-and-drop system interaction is implemented so that any view can participate by having a UIDragInteraction
attached to it and then implementing the appropriate delegates. Similarly, the drop target just needs to implement the drop delegates to accept the dragged data. On iPad, items can be dragged from one app to another, but on iPhone, drag and drop only works inside the same app.
One nice thing is that if a view already knows how to accept pasted data, then it automatically will accept drops of the same kind. So, UITextView
can automatically have text dropped onto it without your needing to add anything to your app. You can get the basics by watching the “Introducing Drag and Drop18” video or downloading the demo app19.
If you want to add drag or drop behaviors to a UITableView
or UICollectionView
, then a lot of the work is done for you already, and you just need to implement the drag or drop delegates specific to those views. The details can be found in the “Drag and Drop With Collection and Table View20” video and demo app21.
The UICollectionView/UITableView Drag and Drop Demo app implements a photo album that supports using drag and drop to:
The main points to look at are in PhotoCollectionViewController.swift
in the sample app (which you can download22):
A UIViewController
with a collection view should implement the UICollectionViewDragDelegate
to allow drags and the UICollectionViewDropDelegate
to allow drops.
class PhotoCollectionViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout, UICollectionViewDragDelegate, UICollectionViewDropDelegate {
As with other delegates, you should assign the collection view’s drag and drop delegates to self
in viewDidLoad
.
collectionView?.dragDelegate = self collectionView?.dropDelegate = self
The only required drag delegate protocol method is called to create a UIDragItem
array when dragging starts. A drag item holds any object that represents the drag data.
func collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] { let dragItem = self.dragItem(forPhotoAt: indexPath) return [dragItem] }
On the drop side, you need to say whether you can accept the data being dragged over you:
func collectionView(_ collectionView: UICollectionView, canHandle session: UIDropSession) -> Bool { guard album != nil else { return false } return session.hasItemsConforming( toTypeIdentifiers: UIImage.readableTypeIdentifiersForItemProvider) }
In this case, we return true
if the dragged item can be turned into an image.
Once the drop actually happens, we need to copy or move the photos into the collection view.
func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) { guard album != nil else { return } let destinationIndexPath = coordinator.destinationIndexPath ?? IndexPath(item: 0, section: 0) switch coordinator.proposal.operation { case .copy: // Receiving items from another app. loadAndInsertItems(at: destinationIndexPath, with: coordinator) case .move: move(items: coordinator.items, with: coordinator) default: return } }
There are entry points for customizing the lift and drop animations, and for moving items out of the way, and a lot of other possibilities. Many of the optional features are implemented in the sample app, and more details were covered in the “Mastering Drag and Drop23” session. You could also read the “Drag and Drop5224” documentation.
If your iOS app is also available as a mobile web app, then you can get access to the user’s website credentials to let them log into your app automatically.
To support pre-iOS 11 features (such as universal links25), you probably already have an apple-app-site-association
file to connect your website and app (if not, you should do that). All you need to do in addition is set the content type of your username and password UITextField
s to .username
and .password
, respectively.
self.userNameField.textContentType = .username self.passwordField.textContentType = .password
Then, when you show a log-in screen, iOS will offer to fill it in with the user’s saved credentials.
More details can be found in the “Introducing Password AutoFill for Apps27” session.
The new Files app lets users browse files directly, but if your app needs files from other apps, you can bring up a document-picker view, similar to how you would have used an image picker to get a photo from the Photos app.
let docs = UIDocumentBrowserViewController(forOpeningFilesWithContentTypes: [kUTTypePDF]) docs.delegate = self // implement UIDocumentBrowserViewControllerDelegate self.present(docs, animated: true)
To process the chosen document, implement this UIDocumentBrowserViewControllerDelegate
protocol method:
func documentBrowser(_ controller: UIDocumentBrowserViewController, didPickDocumentURLs documentURLs: [URL]) { // process document here }
The session “File Provider Enhancements28” covers this in more detail.
Swift 4 is open-source, so most of what’s happening in it can be seen in the mailing list and GitHub repository. One thing that was shown at WWDC is the new Codable
protocol, which allows structs to be encoded via the NSCoding
classes. All you need to do is declare conformance to the Codable
protocol, and Swift will give you a default implementation, like so:
struct WWDCVideo : Codable { let title: String let presenters: [String] let videoURL: URL }
This gets you automatic JSON support. You encode a struct like this:
let swiftVideo = WWDCVideo( title: "What's New in Swift", presenters: [ "Doug Gregor", "Bob Wilson", "Ben Cohen", "John McCall", ], videoURL: URL(string: "https://developer.apple.com/videos/play/wwdc2017/402/")! ) let jsonData = try JSONEncoder().encode(swiftVideo)
And you decode with this:
let vid = try JSONDecoder().decode(WWDCVideo.self, from: jsonData)
Also, Codable
supports custom encoding and decoding if you need it, and it supports an easy way to make simple alterations, like alternate key names (see CodingKeys
).
For more on what’s happening in Swift, see “What’s New in Swift29.”
One big theme of WWDC was how Apple is using machine learning (ML) to add features across the system and apps. The Siri watchface at the top of the keynote was the first example, but Apple announced so many ML-based features that it was not a surprise when it introduced CoreML, a new Apple framework that implements the run phase of ML models, such as neural networks.
At a very high level, machine learning is used to implement functions that map arbitrary inputs to arbitrary outputs. Instead of the mapping being coded directly, it’s learned from sample data. In iOS, machine learning has been used to implement facial recognition, OCR, handwriting recognition, typed-text prediction, Siri and a lot of other features.
The first thing that CoreML does is define a machine-learning-model file specification. This file is something you create ahead of time by using training software to describe your model and feeding it a lot of examples of inputs and the expected outputs. Over time, the software will be able to predict the outputs for new inputs. This understanding can be exported to model files to be used in other programs that can run models.
Once you drag a model file into your Xcode project, a Swift class is created for you that exposes a simple function that you can use to run the model on your input.
A common form of ML input is an image (from the camera, for example), and a common output is a rectangle of a recognized region in the photo. It might look something like this:
let kittenFinder = KittenFinder() let r: CGRect = kittenFinder.findKitten(image: imageView.image)
The exact interface is generated from your model file. When you call it, all kinds of things are taken care of for you. For example, models based on images usually need a specific size and pixel format (color or grayscale). CoreML will automatically convert whatever image you send it to whatever the model actually needs (and supports all of the ways an image can be represented in iOS).
Using the model is extremely simple. Making these models is left as a exercise to the developer, but there are actually a lot of open-source ones, and Apple has made some available30 for you to use in your apps. The model format’s specification is open, and there’s an open-source Python library to help you convert31 other formats to it. It’s likely that the ML community will make more models available in this format in the coming months.
There’s a lot more in the “Introducing Core ML32” session and in the CoreML developer documentation33.
But Apple didn’t stop there. On top of CoreML, It wrote two more frameworks that make some common tasks even easier. The Vision framework assumes that you want to recognize objects in a live camera stream, and it can read AVCaptureSession
images automatically. It also builds in some models, such as a more accurate face detector that can also give you the location of “face landmarks” (for example, eyes, nose, mouth).
There is no sample app or documentation for detecting faces yet, but I was able to piece something together from what Apple showed in the Vision session (get it on GitHub34).
In a typical AVCaptureSession
-based app, add the Vision import to your View Controller
import Vision
And add this property to make detection requests:
var requests: [VNDetectFaceRectanglesRequest] = []
Initialize it in this function, which you should call in viewDidLoad
:
func setupVision() { let faceDetectionRequest = VNDetectFaceRectanglesRequest(completionHandler: self.handleFaces) self.requests = [faceDetectionRequest]; }
In your captureOutput
implementation, add this code:
guard let imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer) else { return } // Make the Face Detection Request var requestOptions: [VNImageOption: Any] = [:] if let cameraIntrinsicData = CMGetAttachment(sampleBuffer, kCMSampleBufferAttachmentKey_CameraIntrinsicMatrix, nil) { requestOptions = [.cameraIntrinsics: cameraIntrinsicData] } // The orientation should be determined from the phone position, but assume portrait (1) for now let imageRequestHandler = VNImageRequestHandler(cvPixelBuffer:imageBuffer, orientation: 1, options: requestOptions) do { try imageRequestHandler.perform(self.requests) } catch { // handle this }
When a face is detected, this function will be called:
func handleFaces(request: VNRequest, error: Error?) { DispatchQueue.main.async { self.hideFaceBox() guard let result = (request.results as? [VNFaceObservation])?.first else { return } let bb = result.boundingBox if let imgFrame = self.imageView?.frame { // Bounding Box is a 0..<1.0 normlized to the size of the input image and // the origin is at the bottom left of the image (so Y needs to be flipped) let faceSize = CGSize(width: bb.width * imgFrame.width, height: bb.height * imgFrame.height) self.drawFaceBox(frame: CGRect(x: imgFrame.origin.x + bb.origin.x * imgFrame.width, y: imgFrame.origin.y + imgFrame.height - (bb.origin.y * imgFrame.height) - faceSize.height, width: faceSize.width, height: faceSize.height) ) } } }
The request passed in has a results array. We grab the first element and turn its bounding box into a frame for a semi-transparent view to show over the captured image. The main thing to note is that the coordinate system of the bounding box puts the origin in the bottom-left, whereas the iPhone puts the origin in the top-left, so we need to flip the Y coordinate.
The full app is available on GitHub35.
Here is me running the device pointing at my laptop showing a picture of Tim Cook:
See the “Vision Framework: Building on CoreML36” session for details, or read the Vision documentation37.
There’s also a natural language processing (NLP) library, which didn’t seem as useful to me, but it can detect languages and label parts of speech in a text input. The core parts could be used to implement something like a predictive text engine in a keyboard, but that’s not built into the framework.
See all of the details in “Natural Language Processing and Your Apps38.”
All CoreML frameworks are on device, which means:
The similar features from cloud services tout much higher accuracy and training based on enormous data sets, which continue to grow. Your CoreML model is baked in at compile time. If you get more data, then you’ll need to retrain your model, import it and rebuild.
The final big announcement was ARKit, a new framework for adding augmented reality to your app. If you have been building any content using SceneKit (for 3D games) or SpriteKit (for 2D), then you are in a good position to take advantage of ARKit, because it integrates with their drawing surfaces. Incorporating your existing code into an AR version of your app doesn’t take much.
To get you started quickly, Xcode now has an augmented-reality app template:
If you choose this, then on the next screen, you are given a choice of content technology (SceneKit, SpriteKit or Metal). Choose SceneKit, and the app will be ready to run.
The default code places a spaceship floating in front of you. You can walk around and examine it. Because this is all built on SceneKit, adding in your 3D models is simple if you have them. Just import one and update this line:
let scene = SCNScene(named: "art.scnassets/ship.scn")! sceneView.scene = scene
But to play around, you can generate 3D geometry with SceneKit’s various geometry nodes. For example, replace the above two lines with this:
self.sceneView.autoenablesDefaultLighting = true let scene = SCNScene() let sphereNodes = SCNNode() scene.rootNode.addChildNode(sphereNodes) addSphere(to: sphereNodes, pos: SCNVector3Make(0, 0, -2.0)) addSphere(to: sphereNodes, pos: SCNVector3Make(-0.3, 0.2, -2.4)) addSphere(to: sphereNodes, pos: SCNVector3Make(0.3, 0.2, -2.8))
The AR template turns off default lighting in the storyboard, but we want our spheres to appear to be lit by the light that ARKit detects in the scene. All of the coordinates are in real-space coordinates of 1 meter, and the negative z-axis is in front of us, so this places 3 spheres about 2 meters or so in front of our starting position.
Then, add this function to create and add a sphere to the scene:
func addSphere(to node: SCNNode, pos: SCNVector3) { let sphere = SCNSphere(radius: 0.1) let sphereNode = SCNNode(geometry: sphere) sphereNode.position = pos node.addChildNode(sphereNode) }
When you run it, it will look like this:
ARKit can also detect surfaces and lets your nodes interact with them. Check out the “Introducing ARKit: Augmented Reality for iOS41” session for details. Apple’s Developer website also has documentation for ARKit42.
Even with all of this, there was so much more. Xcode 9 is a big upgrade, with a fully rewritten editor and (finally) support for refactoring in Swift. You can run multiple simulators and even debug wirelessly (much needed for AR debugging).
There’s more support for right-to-left languages and easier ways to deal with dynamic type sizes.
Swift Playgrounds got two updates. One you can download now, but the beta for version 2.0 is also available through TestFlight43. This new version lets you play with all of iOS 11’s features, such as ARKit and Swift 4.
Normally, we expect the real release of all of this sometime in September, along with new iPhones, so go watch those videos and get your apps ready for iOS 11.
(da, vf, al, il)
If you are into Microsoft’s UWP Design and use React, this might be interesting for you.
https://www.minds.com/ is what started this all…
1. Navigate to the Facebook website and log in to your account.
2. Click the “Find Friends” link located next to your account name on the Facebook menu.
3. Enter the name of an employer in the “Employer” field.
4. Select the correct employer from the search results that appear.
5. Click the “Add Friend” button located next to any of the people listed in the results for that company or click the person’s name to view his public personal Timeline.
Finally, if you run across folks online you want to know more about often, search a ton of engines for someone’s name with the Who Is This Person? Firefox extension. Simply highlight the name on any web page and look ’em up on Wink, LinkedIn, Wikipedia, Facebook, Google News, Technorati, Yahoo Person Search, Spock, WikiYou, ZoomInfo, IMDB, MySpace and other engines from the Who Is This Person? context menu item.
For more online sleuthing resources, check out Wendy’s great tutorial on searching public records online. To make yourself more findable? Have a say in what Google says about you. Also, many of these services let you “claim” your name and add information to your results. Do a search for your own name and click the link that says, in effect, “Is this you?”
July is almost here, and that means, well, new wallpapers. It’s been nine years already since we embarked on this mission1 to welcome the new month with a fresh batch of desktop eye candy, with wallpapers that are a bit more distinctive as the usual crowd. And it wasn’t any different this time around.
Bound to spark new ideas, artists and designers from across the globe once again challenged their creative skills and created a lovely collection of wallpapers for July 2017. All of them come in two versions — with and without a calendar — and can be downloaded for free. Now you only need to decide which one will make it to your desktop. Enjoy!
Please note that:
“Summer is coming in the northern hemisphere and what better way to enjoy it than with watermelons and cannonballs.” — Designed by Maria Keller7 from Mexico.
“July often brings summer heat and we all wish for something cold to take it away… If you take a closer look, you will see an ice cream melting from the sunset. Bon appetite!” — Designed by PopArt Studio60 from Serbia.
“And once you let your imagination go, you find yourself surrounded by eternal summer, unexplored worlds and all-pervading warmth, where there are no rules of physics and colors tint the sky under your feet.” — Designed by Ana Masnikosa105 from Belgrade, Serbia.
“July is the middle of summer, when most of us go on road trips, so I designed a calendar inspired by my love of traveling and summer holidays.” — Designed by Patricia Coroi148 from Romania.
“What’s better than a starry summer night with an (unexpected) friend around a fire camp with some marshmallows? Happy July!” — Designed by Etienne Mansard167 from the UK.
“July is National Ice Cream Month and who needs an invitation for a scoop or two, or three! Lacking the real thing, our Tutti Frutti wallpaper can satisfy until your next creamy indulgence.” — Designed by Karen Frolo214 from the United States.
Designed by Maria Karapaunova387245 from Bulgaria.
“Rural landscape, silence, freedom. I took this photo in July three years ago in a small village near Wroclaw in Poland. I remember very well that day. I went alone on a trip, it was just before my son Leo was born. I was wondering how our everyday life will change, how it would be to be a mom, would I manage… Now I share this free photo with you together with all the feelings that accompanied me that day!” — Designed by Altphotos290 from Poland.
“There are a lot of emotions to transmute in the dusk. Even more so in embracing one’s darker side. The twilight brings us into a deeper level of commitment to reality, evoking a sense of self. It’s a mystical phase of seeking the inner mind, knowing your deeds, your faults, your promises and your paradoxes. It is a quest for beauty in life and simply how much you dissolve into the light. There’s always a place where you meet darkness and can’t recognize what all are happening to you and around. The show time is on until the last beam of light, never miss a moment.” — Designed by Sweans311 from London.
“Words are few, thoughts are deep, memories of you we’ll always keep.” — Designed by Suman Sil356 from India.
“In summer everything inspires me. :)” — Designed by Maria Karapaunova387245 from Bulgaria.
“In times of clean eating and the world of superfoods there is one vegetable missing. An old forgotten one. A flower actually. Rare and special. Once it had a royal reputation (I cheated a bit with the blue). The artichocke — this is my superhero in the garden! I am a food lover — you too? Enjoy it — dip it!” — Designed by Alexandra Tamgnoué432 from Germany.
Designed by Ilaria Bagnasco471 from Italy.
“Big cats. Big cause. But it just needs a small step. A calendar tribute to the pride of India!” — Designed by Color Mean Creative Studio500 from Dubai.
Designed by Michael Wagner533 from Orlando, FL.
Designed by James Mitchell560 from the United Kingdom.
“It is July and the most awaited moment arrives… Holidays! We pack our bags and go to relax! Happy holidays!” — Designed by Veronica Valenzuela581 from Spain.
“Summers of my childhood were spent singing John Denver songs around the campfire with my family. This tradition is now being passed down to my own children, who all know a good John Denver song when they hear one. ‘Country Roads’, one of Denver’s biggest hits (and also our family favorite), was written while he was performing in Washington D.C. – and inspired by nearby Harper’s Ferry, WV. The lyrics paint a picturesque summer day in Harper’s Ferry so well: ‘Almost heaven, West Virginia, Blue Ridge Mountains, Shenandoah River. Life is old there, older than the trees, younger than the mountains, blowing like a breeze. Country roads, take me home to the place I belong. West Virginia, mountain mamma, take me home, country roads.’” — Designed by The Hannon Group602 from Washington D.C.
“‘I think we’re going to the moon because it’s in the nature of the human being to face challenges. It’s by the nature of his deep inner soul… we’re required to do these things just as salmon swim upstream.’ (Neil Armstrong) — Designed by Dipanjan Karmakar629 from India.
“July 28th is Beatrix Potter’s Birthday. I have always loved reading ‘The Tale of Peter Rabbit’, so created this wallpaper in honour of Beatrix! I have also included an inspirational quote by the lady herself to motivate you this July.” — Designed by Safia Begum648 from the United Kingdom.
“Snails can be inspiring! If you keep heading towards your goal, even if it is just tiny steps, enjoy the journey and hopefully it will be worth the effort.” — Designed by Glynnis Owen667 from Australia.
“Although we tend to think of it more in the summer, the ocean is there all year.” — Designed by Hannah Joy Patterson692 from the USA.
“Great success in life comes to those who leave the comfort of their nest, break out from their shells and venture out to explore the world of risks and rewards opportunities.” — Designed by BootstrapDash735 from India.
“I love the relaxed feeling of subdued floral patters. July should be a month of hanging out by the lake, enjoying family time, and enjoying a more relaxed schedule.” — Designed by Kindel Thomas778 from the United States.
“July is one awesome month, and even though it has very short evenings, those evenings are full of stars. On those evenings in July you can also see the Milky Way, our home galaxy. And you can see it the way I have it on my wallpaper with a DSLR camera.” — Designed by Igor Ristovski795 from Macedonia.
“You don’t need a day for kissing that special someone in your life — but today’s hectic living has made kissing an almost forgotten art. We kiss hello, we kiss goodbye — hurried, fleeting, and sometimes as an afterthought; often mechanical. Kissing for kissing’s sake — now that’s what we’re talking about! Stop everything else; let time stand still; let your hearts beat as one; hold the love of your life in your arms, close your eyes, and give in to the simple, intimate pleasure that is a kiss, on this July 6th. The International Kissing Day celebrates the humble kiss; and reminds us all how good it feels. Happy International Kissing Day, folks!” — Designed by IPIX Technologies828 from India.
“The wallpaper is based on a picture I took when I was on vacation last year with my parents. I took it in Bormes-les-Mimosas in the South of France. It’s a very lovely village. Being there always makes me happy, so I wanted to share this feeling with the world.” — Designed by Melissa Bogemans875 from Belgium.
Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.
A big thank you to all designers for their participation. Join in next month916!
What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.
This week, we’ll explore some rather new concepts: What happens if we apply artificial intelligence to text software, for example? And why would a phone manufacturer want its business model to be stolen by competitors? We’ll also take a look at how we can use the new headless Chrome browser for automated testing and learn to build smarter JavaScript bundles with Webpack 3’s new scope hoisting. Sometimes it’s easy to be excited about all the improvements and new things our industry has to offer.
import()
expressions, string enums, and a couple of other features.—Anselm
An exclusive freebie from the Icons8 Dusk icon set with 80 modern, soft-colored icons in several different formats, perfect for a fresh interface design.
Fractures * Numi * Attract hover effect * sqlify * Gatsby * Remote Starter Kit * ImageOptim Sketch Plugin * Pe…
Lettering and calligraphy are quickly becoming desired skills in a designer’s toolbox. Designers such as Marian Bantjes, Jessica Hische, Sean Wes and Martina Flor, just to name a few, have become not only an inspiration to the rest of us, but also a standard. Their work is not only client-based; they have become their own brand by providing products to their followers as well. Other designers have followed suit, and now it would seem that lettering and calligraphy are everywhere.
Thus, there is growing interest among designers and non-designers to learn. However, the majority of the resources and lessons available are for right-handed people. And when one finds a resource to get started with brush lettering for left-handed people, it might not be as comprehensive. As an educator, I have learned that one of the most challenging aspects for an aspiring left-hand letterer is to apply everything that a right-handed person is teaching. It is almost like doing mental gymnastics.
In my two previous articles, “Brush Lettering: It Only Gets Better After Practice,” part 11 and part 22, I talked about the reasons for the popularity of lettering and about supplies, inspiration, the basic principles and about forming the letters, and I also provided some videos. After I wrote the articles, I realized that I offered no theoretical or practical advice to those who want to learn lettering and who are left-handed.
While I am not able to guarantee your fame and notoriety, I can help you get started with the fundamentals of lettering with the left hand: the position and placement of the arm and wrist, the position of the paper, and holding the tool (brush pens). In this article, I will share theoretical as well as practical advice, demonstrating some points using my student Talondra Keeton3, who is left-handed, to create lettering. She started back in January, and throughout the semester she has been consistently improving. Let’s get started.
This last semester, I taught a “special topics” class at the university where I work, titled “Explorations in Lettering and Scripts.” There were three students in the class who are left-handed. Since then, I have been trying to gather resources and examples to help them with the practical aspect of the lessons we covered. I have come across several articles and blog posts. Some are more scientific than others, and others are more focused on practical tips.
One of the most interesting things I learned while researching for this article is that Dr. M.K. Holder, who is executive director of the Handedness Research Institute8, states that writing with the left hand is not simply the opposite of writing with the right hand — nor is it enough to teach the opposite way. The main and most important difference is that, while right-handers write away from the body, left-handers write towards the body. Rest assured, there is hope and many good examples of letterers and calligraphers who are left-handed and who create gorgeous work.
According to some researchers, left-handers account for 10 to 12% of the population. Neal from LeftyFretz9, a website for left-handed musicians, has put together a great post reporting the percentage of people who are left-handed, by year and country. Though it varies, there is an overall increase in the percentage of people who self identify as left-handed. However, he states that there is still some stigma about being left-handed. If you are left-handed and are reading this, please know that you are in good company. A great number of famous people were and are left-handed, among them, Alexander the Great, Leonardo da Vinci and Vincent Van Gogh. And according to BuzzFeed10, Bruce Willis, Demi Moore, Pierce Brosnan, Bill Clinton, Jim Carrey, David Letterman, Bill Gates, David Bowie, Prince Charles, Prince William and even Barack Obama are all left-handed.
I grouped these three aspects because they are closely related: the position of the arm and wrist go together with how the paper is positioned. Below you will see several opinions on the matter.
Jodi Christiansen, calligrapher and member of the International Association of Master Penmen, Engrossers, and Teachers of Handwriting11 (IAMPETH), writes in her post “Calligraphy and the Left-Handed Scribe12” that there are two types of left-handed ways to hold the pen:
Based on the article, it seems that curlers might have a harder time doing lettering and calligraphy than non-curlers. The reason for this is that it is hard to see what you’ve just written. If your hand curls over the line of text you just wrote, it would be difficult to determine how much space to leave, let alone whether the ink is still wet. That would cause a lot of smears.
In addition to Christiansen’s hand positions, Jim Bennett, author of the book Calligraphy for Dummies17, talks about how to position the paper. Bennet lists three positions for the paper:
The paper’s position and angle and how the hand rests on the paper are critical. Some will find it comfortable to rotate the paper to find the best way to create the letters.
However, Dr. Holder stresses that the best position for the paper is “to the left of the child’s midline, and tilted so that the top right corner of the paper is closer to the child than the top left corner.” He explains that this position allows the hand to be positioned “to the left and away from the body at the start of writing line…” He adds that the angle will vary according to the person’s preference. However, the most important thing to keep in mind is “to keep the arm perpendicular to the bottom of the page,” keeping the wrist straight and “the hand below the writing line.”
Claire from Heart Handmade UK26, who had to relearn to write after suffering an injury, advises several things and lists a few tools in her article “How to Improve Handwriting Skills for Adults That Are Left Handed27.” Among these, she advises to try to keep the elbow close to the body, to keep the arm straight, not to curl the wrist and to instead move the paper to a 45-degree angle, which will “automatically bring the hand to the correct writing position.”
Below is my student, Talondra, demonstrating how she places the paper. You will notice that she places the paper at approximately a 45-degree angle.
The biggest advantage of brush pens is their flexibility. The brush tip can turn to the left or the right. Notice in the video below how Talondra holds her brush pen.
Matt Vergotis28, logo designer and letterer, has very smart advice for left-handed letterers. He is left-handed, too, but he points out something I had not thought about, in an interview conducted by Daniel Palacios29 on his blog:
Brush pens have that 360º flexibility to the tip, so they’re not like chisel tip pens or calligraphy pens where the nibs split. Those pens are usually suited to specific angles whereas a brush pen with that 360º range of flexibility, isn’t a disadvantage to leftys.
Even more interesting is that he tends to hold the brush pen above the word. In other words, he tends to curl his hand over the letters. But his top advice is this: repetition. He recommends practicing 15 to 20 minutes a day, and over time you will see improvement.
I will add that another element to repetition is patience and a willingness to be comfortable with being uncomfortable. Learning a new skill, no matter how much we like it, will bring moments of discomfort. But it is that patience and determination to overcome the discomfort, which equals deliberate practice, that will help you get better and better.
Talondra, my student, found that the more she practiced, the better she got at making each stroke. When she started, she found that her hand would shake, making her strokes wobbly. Here is a picture of one of her first practice drills:
Eventually, she came up with a unique way to practice the basic strokes that made sense to her. She starts writing on the right side of the page and works her way to the left. I asked her if that is better for her, and she said that, yes, it helps her to control her hand shakiness. Here is a video of the practice:
However, when she writes a word, she starts from the left and works her way to the right side. Here are two videos of her writing words from two angles:
Notice that she constantly adjusts the pen and the paper to be able to create some strokes. She is very conscious of the contrast there should be between thick and thins, so she tries to accomplish that.
Another useful tip from Dr. Holder is to hold the pen or pencil about 1 inch or 1.5 inches away from the point of the pen or pencil, in order to see what is being written. He stresses that, while the grip might be tight and tense while you’re learning it, with time and practice this will improve. Another tip is to write large letters at first, which will help with relaxing the grip, then reducing the size of the letters as one gets more comfortable.
Let’s sum up some of the advice we have gone through so far:
Here’s another piece of advice to keep in mind from Winston Scully4636, in an interview37 with Sean Wes38: Let go of the mental barrier. He also has great tips on creating beautiful work, such as start with pencil and then ink the piece; use a grid (parallel lines); and once you get a word where you want it, trace it writing it backwards — he says in the interview that this trains your eye to tackle spacing issues.
One thing I found very interesting about Talondra’s progress is that she taught herself to do some drills without lifting the pen. That alone was a great accomplishment because, as I mentioned earlier, she used to experience a lot of hand shakiness. Take a look at this video of her doing M’s:
Lettering is a work in progress, where one moves from larger movement control to smaller movement control. That is why a willingness to fail, to be comfortable with being uncomfortable, and repetitive practice will be your best friends. In the meantime, we can all look at others’ work to be inspired to be better.
In this next part, I will list letterers and calligraphers who are left-handed, for your inspiration. But before we continue, take a moment to think about and practice some of the things you have read here. I will wait.
In my journey as a brush letterer and now practicing with the pointed pen, I have learned that, before looking at people’s work, I have to think about what I want to learn from them. For instance, in this case, as you look at the examples and go to their pages, keep in mind what you have read so far: arm and wrist position, paper position, and holding the pen. Ask yourself some questions:
Also, keep in mind that unless the person you are looking at teaches, they might have developed a way to work that they are not able to fully explain to you. I mention this because sometimes we all do things by memory, not fully aware of each step we are taking. I have included examples using both the brush pen and the pointed nib.
Ready to see some great work? Here is a list of left-handed calligraphers and letterers. I know there must be more great ones out there, so please feel free to share in the comments!
Learning lettering is fun, but it can also be a tad frustrating for a number of reasons. Among those reasons, being left-handed in an environment where the majority are right-handed can feel daunting. In this article, I hope you’ve found tips, practical advice, examples and inspiration. Beyond these, however, I hope you feel that it is attainable and that you can do it.
When I started, I decided to practice every day. Maybe all you have is 15 minutes, or maybe you have more time. What matters is to practice. Maybe you like to learn songs — then use lyrics to practice. Or maybe you like to read books — if so, you can use excerpts to help you practice. Just make sure not to sell another person’s excerpts or lyrics. Practicing is OK, but selling it could (and most probably will) get you in trouble.
There are a lot of letterers on Instagram who hold monthly practice challenges. One of my favorites when I started was hosted by Caroline Kelso106. Now my favorite is another account named Hand Lettering for Beginners107. While you engage in these challenges, keep watching your favorite letterers and calligraphers. Experiment. And have patience. Practice makes progress, and remember: It only gets better with practice! With that in mind, check out my practice sheets here108 and let me know what you think of them. Use can use SMASHING5 as a code to get a freebie when you buy one. Have fun and please share your progress with me here or on Instagram109. I’d love to hear from you!
(vf, al, il)
Front page image credit: Amanda Houston125.
An interview with designer and developer Michael Mckeever, where he shares some of his favorite tips and JS libraries for typesetting on the web.
Today we have a great freebie by the Icons8 team shared exclusively with Codrops readers! The freebie is a set of 80 lovely UI icons from the new Dusk themed icon set.
The UI icons come in a unique style with a playful touch and soft colors. The formats included are: EPS, PDF, optimized PNG (50px), and SVG in two different dimensions (50px and 100px).
The concepts represented are: Add to Favorites, Add, Answers, Approval, Available Updates, Browser Window, Bullish, Change Theme, Checked Checkbox, Checkmark, Circled Dot, Clear Symbol, Close Window, Collect, Comments, Details Popup, Do Not Disturb, Double Tick, Download, Downloading Updates, Email, Enter, Error, Exit, Expired, FAQ, Feedback, Find and Replace, Form, Help, High Priority, Horizontal Settings Mixer, In Progress, Info Popup, Info, Installing Updates, iOS Photos, Language, List, Login Rounded Down, Login, Logout Rounded Down Filled, Logout Rounded Left, Logout Rounded Up, Logout Rounded, Maintenance, Maximize Window, Menu 2 Filled, Menu, Mind Map, Minimize Window, Natural User Interface 1, New Document, Notification, Numbered List, Online Support, Open in Browser, Open in Window, Org Unit, Privacy, Private, Process, Questions, Restore Window, Save as, Save, Submit Progress, Support, Thumbnails, Toggle Off, Toggle On, Unchecked Checkbox, Upload, User Manual, Vertical Settings Mixer, View Details, VIP, Workflow, Zoom In, Zoom Out
As you can see on the preview below, the icon pack consists of topics that can come in handy for your next interface design:
You can download the freebie here:
The icons are free for personal and commercial use. No linking required, but if you provide a link, the guys from Icons8 will drink to your success. 🙂 Please don’t resell or redistribute them.
Feel free to use the Icons8 Web App for:
Also, check out the handy desktop app that will make all Icons8 icons available on your computer.
We hope you enjoy this freebie and find it useful!
If you’d like to contribute and publish your exclusive freebie on Codrops just drop us a line.
Szenia Zadvornykh started this great series of tutorials on WebGL, Three.js, and Three.bas.
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 everything from carousels to filters, calculators, charts, timelines, maps, multi-column tables, almighty pricing plans all the way to seating selection in airline and cinema websites. But before we head off to complex interface problems, let’s start with something seemingly simple and obvious: an accordion.
There is a good reason why the accordion is probably the most established workhorse in responsive design. It’s an immensely useful pattern for progressive disclosure — highlighting important details of a section and revealing more details upon a tap or click, if necessary. As a result, the design stays focused and displays critical information first, while everything else is easily accessible. In fact, if you encounter a problem of any kind — too many navigation options, too much content, too detailed a view — a good starting point would be to explore how you could utilize the good ol’ accordion to solve that problem. More often than not, it works surprisingly well.
However, even a component as predictable and frequently used as an accordion has a lot of room for interpretation and ambiguity. Now, don’t get me wrong: context matters. An accordion for a navigation will require a different approach than a Q&A section. But in all the different contexts we have to thoroughly consider two things: the visual design and the interaction design of an accordion to eliminate all points of confusion and misinterpretation.
Now, if we look a bit more closely into the accordion’s barebones, it won’t be difficult to see all of its atomic elements. An accordion always contains the category title, an expanded and a collapsed state, an icon indicating expansion, and the spacing between them. Once the category is expanded, the icon should change to indicate collapsing. However, what if the user clicks on a collapsed card while another card is open? Should the expanded card close automatically, or not? What if not all items can be displayed — should the user be automatically scrolled up? Let’s take a closer look at these, and related issues, one by one.
Now, let’s get started. What do we know? Well, obviously, in most left-to-right interfaces, the category name will be left-aligned, too. Assuming that, like in many accordions, the sub-items will slide in between two sections, what icon would you choose to communicate this behavior? An arrow pointing down, an arrow pointing to the right, a chevron pointing down, a plus, a circled plus — maybe something entirely different?
In my experience, it appears that the choice of icon doesn’t really matter as long as it isn’t overloaded with various meanings in the same UI. E.g. you could potentially use circled plus to indicate expansion, zooming and a bundle of two items in a pricing plans — and that might introduce confusion. However, in context of the accordion, users seem to understand that if some of the navigation items have an icon, while other sections do not, it’s some kind of sign that more content is available upon click or tap. We couldn’t spot any indication of one icon being more or less recognizable than others. However, it doesn’t mean that some options might not cause more confusion than others.
For example, Slack13 uses an arrow pointing to the right, although accordion items slide in vertically between category titles, rather than from to the right of it. Now, at this point it’s worth asking what purpose the direction of the icon should have? It should probably serve as an indicator of the direction of movement, or more specifically, where the user’s view will be moved to once the icon has been tapped or clicked. In Apple Mail on iOS, for example, the chevron pointing to the right maps to the movement of the user’s view from left to right.
Having a mapping between the direction of the icon and the movement of the user’s view seems reasonable, but since different interfaces behave differently (with mysterious icons often playing mind games with users) not everybody will be expecting this behavior. So in the end, it doesn’t really matter what you do as a designer: one way or another, you won’t be able to match the expectations of some of your users. When designing, we tend to focus on what we are designing, but even if we are extremely consistent in our UIs, our users will come with expectations influenced by their experiences on websites we’ve never even seen. The key, then, is to be as resilient as possible and provide an easy, straightforward recovery in case the expectations aren’t met.
So looking back at the choice of the icon then, if the accordion items slide in vertically, intuitively it seems safe to use any of the icons listed above except the icon pointing to the right. The only issue to consider here would be if the icon you choose is already overloaded with another meaning in a different context — for example, if you’re using a plus icon to highlight the parts of a bundle deal in a pricing plan (where the plus is not clickable), and then use exactly the same plus icon for the accordion. In such a case, it’s better to avoid using exactly the same icon for different purposes as it might cause confusion.
Is it all cleared up then? Well, not really.
Let’s think about the expected interaction for a second. While the arrow and chevron usually serve as cues for change in the indicated direction, the plus indicates addition and expansion. In both cases, the change can happen in various ways: a tap on the icon causes either an overlay with navigation items appearing above the content, or the items to slide in vertically (not horizontally). So far so good.
However, when a user lands on a page, initially they don’t know if they’ve landed on a long-scrolling page with links jumping to some parts of the page or just a “regular” website with sections existing on their own separate pages. Quite often, an arrow pointing down triggers jumps to sections within the page, rather than expanding navigation options. It’s likely that the user might have been disoriented in the past, being brought to a section of a long page and then returning back to the top of the page, and continuing from there.
As a result, if you choose to use an arrow, you might end up with some users expecting to be scrolled down to that section of the page, rather than see subitems sliding in between categories. Thus, the chevron seems to be a safer and more predictable option; if you choose to use it, then point it down in a collapsed state and point it up when expanded. For the plus icon, you could choose between the minus icon or a close icon instead.
So, what does all of this mean for us, as designers? First, if accordion items are supposed to slide in horizontally from left to right, it’s safe to use an arrow pointing to the right. Secondly, if accordion items are supposed to slide in vertically from top to bottom, either a chevron pointing down (not arrow!) or a plus icon might work well.
With this in mind, a choice of the icon should be a quite straightforward decision. But depending on how close that icon is to the category title, it might cause confusion, too. Now, what options do we need to consider when choosing the position of that icon?
Options! Nevermind which icon you’ve chosen, you could choose to place it a) to the left of the category name or b) to the right of it, or c) align the icon along the right edge of the entire navigation item bar, spacing out the icon and the category name.
Does the position matter? Actually it does. According to Viget’s “Testing Accordion Menu Designs and Iconography33,” some users tend to focus on hitting specifically the icon, rather than the entire navigation bar. There is a simple reason why it happens: in the past, some users might have been “burned” with alternative implementations of the accordion. On some websites, the category title doesn’t trigger expansion and instead goes straight to the category. In other implementations, a tap on the navigation bar doesn’t cause expansion nor jump into the category — it does absolutely nothing.
Although we’ll of course design the entire area to be a hit target, as not every navigation has this behavior, some users won’t know if your navigation is one of the “bad ones” or “good ones” until they actually click on it (or hover over it). As hover isn’t always available, hitting the icon just seems to be a safer bet — a click on the icon will almost always trigger the expected behavior. That’s an important detail to know when designing an accordion.
Across various interfaces and implementations, it seemed that with the icon placed to the right of the category title, users choose to focus on the icon more often than if the icon is placed on the left (where users click on the category’s title or the empty bar). However, some users still tend to choose the icon. Consequently, it’s a good decision to make the icon large enough for comfortable tapping, just in case — at least 44×44 pixels in size.
Left-aligned, right-inlined or right-aligned? It doesn’t seem to matter that much. But if you have a group of accordions (maybe living in a navigation menu), with the length of category titles varying a lot, toggling the accordion states across many sections will require slightly more focus than just running down the navigation bar from top to bottom. It’s just that the mouse pointer or finger has to be repositioned all the time to hit that fancy icon! Also, if the icon is right-inlined, on a narrow screen the finger would need to travel across the navigation area, obfuscating the view. With the icon positioned on the right edge of the bar, this issue would be resolved.
But if the icon is aligned to the right edge of the bar, we still need to be careful not to place it too far from the category’s name. Visually, it should be obvious that expansion relates to the category; so, in different viewports, the position of the icon could change to keep the visual connection obvious. Also, the icon could become slightly larger on wider screens. This option seems to be preferable for a group of accordions, but doesn’t really make a big difference for a single accordion — well, unless your data proves otherwise.
However, even with all these fine details out of the way, the interaction still raises some questions. Let’s assume that the category title is left aligned and the icon is aligned to the right edge of the bar. Following up with the discussion above, what should happen when a user clicks on the category name or on the icon or on the empty space in between? Should they all trigger expansion or should they serve different purposes?
Well, we can be quite certain about one thing: When the user clicks on the icon, they are probably expecting some sort of expansion, so a tap on an icon surely should prompt expansion. The category title, however, could be clicked with the intention of jumping straight to the category or with the intention of expanding.
If the category title triggers expansion, we definitely need to provide a link to the category in the sub-dropdown menu to let users jump right to that section (such as “All items”). That means that the user’s journey from the front page to a category might cause confusion because they wouldn’t expect to need an extra tap when clicking on the category title. However, recovery in that case is obvious and doesn’t really force user to restore the previous state as they can continue right away.
If the link to the category in the accordion is obvious, it won’t feel disruptive, whereas jumping to a category instead of having to expand the navigation item and then return back might feel disruptive. That’s why it’s probably more reasonable to have both the icon and the category title triggering expansion. It’s just less obtrusive this way. Should this interaction happen in between the category title and the icon as well? Some designers might argue that when a user taps on the area when navigating the site, they might not want expansion but rather “anchor” the mouser pointer to start scrolling on the page, and consequently it feels disruptive. That’s possible, of course, but it’s unlikely to happen if the user chooses to open a navigation menu to explore the navigation options.
Accordions are often used for cards, and depending on the viewport’s width, cards can be quite wide, so while some users will desperately try to hit the icon, some of your users will be used to collapsing and expanding cards by tapping on the empty area in the bar. Other users will be used to the empty area serving no purpose at all and will just ignore it. Only few will expect the bar to serve as a link to the category. In our tests, it proved to be less confusing to have empty space trigger expansion, rather than — well, frankly, anything else, so that’s what we choose to use, too.
But what if you do want the category title to be linked straight to the category? One idea would be to bring clarity by having two visually distinctive elements that “hint” at the boundaries of elements — for example, with different background color for the icon and the category title (see the example above). In our experiments, we couldn’t notice any change in behavior and expectations — some people will still click on the category and wonder what happened. Again, having the section linked within the expanded accordion seems to be a safer bet.
Good enough? Well, we aren’t there quite yet. What if the user taps on the icon for expansion but there isn’t enough space on the screen to show all subitems? Somebody on your team might suggest to automatically scroll up the page to make sure that the expanded area is displayed at the very top of the screen. Is it a good idea?
Whenever we try to take control away from the user, that decision has to be thoroughly tested and considered. Perhaps the user is interested in viewing multiple sections at once and wants to quickly jump between the contents of these sections. Rather than making the user wonder about the auto-scrolling or jumping behavior and then scrolling back to restore the previous state, it seems less obtrusive just to keep things as they are, to leave the decision up to the user, as they can scroll down if necessary. Not many users will expect the jump to the top — not interrupting the flow or perhaps having a permalink to the section (if it’s really lengthy) seems to be a better option.
And then another question arises: If one section is already expanded, and the user clicks on another section, should the first one collapse or stay as is? If the first section is collapsed automatically but it’s not quite what the user was hoping for, they could always open it again, but they wouldn’t be able to scan or compare both categories simultaneously. If the section stays expanded, they would have to actively close the category they don’t need. Both options seem to have reasonable use cases.
The nature of an accordion would call for automatic collapsing, but it might not be the best option in terms of usability. For accordions with many items, we tend to leave sections expanded, because the jumping around that occurs as a result of panels closing and opening at the same time is too noisy. Hence, alternatively you could provide a “collapse all”/”expand all” button, which can be very helpful when designing a schedule or a detailed table. If there aren’t that many items, then the section could be collapsed by default because the jump would be minimal. (Please notice that the section would definitely collapse for horizontal accordions — keeping it open just wouldn’t make sense.)
And then there is something else. Nevermind the choice of icon or its position, whenever an accordion is expanded, it should be easy to immediately collapse it. This interaction shouldn’t require any extra movement of the mouse cursor or finger — just like with any other hide-and-reveal interaction. This means that the icon for collapsing and expanding should of course change when activated, but its position should remain exactly the same, allowing for an instant toggling of the accordion’s state.
Phew, that was a lengthy examination of a seemingly obvious design pattern. So, how do we design the perfect accordion? We choose an icon that indicates expansion (chevron pointing down or a plus icon), make it large enough for comfortable tapping and position it across the right edge of the bar. The entire navigation bar triggers expansion — with enough padding around the bar to toggle the states and a link to the category’s main page within the accordion’s category.
If we do choose to use a chevron, the direction should change on tap, and if it’s a plus icon, it could easily transition into an “—” or “x” to indicate collapsing. To keep the interaction even clearer, we can use subtle transitions or animations that would slide in and slide out category items.
Of course, your solution might be very different as your context might be very different as well, so if you are looking for an alternative solution, below you’ll find some questions we always ask when designing an accordion.
The level of consideration required for a component as seemingly established and predictable as an accordion turns out to be an almost never-ending story of design experiments and usability sessions, because there are only a few established guidelines for the appearance and interaction of that component. While building an accessible accordion isn’t difficult46, designing an accordion that is universally understood isn’t that easy. Consequently, users often feel lost because their expectations aren’t matched or because the interaction interrupts their flow. Our job is to reduce friction and make sure it happens as rarely as necessary. With a forgiving and resilient design we can achieve just that.
Perhaps you had a very different experiences than the ones mentioned in the article? Let us know in the comments to this article! Also, if you have another component in mind that you’d love to have covered, let us know, too — we’ll see what we can do!
This article is a part of the new ongoing series about responsive design patterns here, on your truly Smashing Magazine. We’ll be publishing an article in this series every two weeks. Don’t miss the next one — on fancy (or not so fancy) date pickers! Ah, interested in a (printed) book covering all of the patterns, including the one above? Let us know in the comments, too — perhaps we can look into combining all of these patterns into one single book and publish it on Smashing Magazine. Keep rockin’!
Every once in a while, we publish freebies1 related to different occasions and themes. Today, we’d like to share an icon set dedicated to a well-known upcoming American holiday. Some of you may already be working on the usual flyers or brochures, so we thought we’d help you out with a set of colorful icons to spice up your designs a bit differently this year. Thank us later!
Designed by the creative folks at Vecteezy1283, this freebie contains 20 illustrations of some lovely things that shouldn’t be left out on this particular holiday. All icons are available in four formats (PNG, EPS, AI, and SVG) so you can resize and customize them until they match your project’s visual style perfectly. Happy 4th of July to those who celebrate!
This set is released under a Creative Commons Attribution 3.0 Unported7, i.e. you may modify the size, color and shape of the icons (more details in the readme.txt file). Attribution is required, so if you would like to spread the word in blog posts or anywhere else, please do remember to credit Vecteezy1283 as well as provide a link to this article.
Here’s a sneak peek of some of the icons:
Inspired by the most patriotic holiday of the year, we think that these bright 4th of July flat icons will be perfect for every designer this time of the year. From fireworks to ice cream, these icons should give your designs the bang you’re looking for!
A big Thank You to Vecteezy for designing this wonderful icon set — we sincerely appreciate your time and effort! Keep up the fantastic work!
(il)
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.
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 with our users — humor can help make that happen.
But how do I do this?, you might ask. Do I need to be a comedian? Should I format all of my FAQs as knock-knock jokes? The answer is no to both of those questions. You can incorporate humor in your design, maintain your brand identity and not look like you are trying too hard in the process.
People in general, many of them your potential users, enjoy humorous things every day: Side-splitting memes go viral, people share humorous personal stories on social media with friends and colleagues, awkward family photos get shared, and products are reviewed tongue in cheek, to name a few ways. We acknowledge humor done well over digital media: the Webbys have a humor category9 for its annual website awards; the Shorty Awards have a “Best Use of Humor”10 category for its social media award.
You don’t have to be all or nothing about your use of humor. You can use humor without presenting a comedy-focused experience. You can inject humorous elements in the experience, the same way you might add a unique icon: to add meaning and create a shared language with users. You can also use humor in your content to help form a connection with users.
Espen Brunborg, speaking at Beyond Tellerrand11, discusses the importance of effective use of comedy in a landscape where many websites look and feel the same across industries. Humor can set your experience apart from others in a positive way. You make your brand memorable and build relationships with users by effectively using humor.
Humor could potentially lead to a deeper emotional experience for the user, a key component for an effective UX. I’ll talk about opportunities to insert humor in the experience later. First, let’s discuss types of humor to consider.
I apologize in advance. I’m going to try to explain why something is funny. First, humor is extremely subjective. I happen to think I’m hilarious. I often make jokes during meetings and when I speak at conferences. Almost as often, no one laughs at my jokes. Humor is contextual. You might make a joke that is funny in one situation and taken seriously in another setting. Also, humor is cultural. My experience with humor has all been through the eyes of Western cultures. I wouldn’t assume that my view of humor is transferable to other cultures.
Researchers have attempted to develop theories accounting for why something is funny. The incongruity theory posits that people find humor when something happens that is not in line with their expectation — for example, an envelope being opened and then glitter exploding all over the room. The benign-violation theory suggests people find humor in situations where something seems threatening but they know they are safe. For example, puns often violate laws of language, but the words in them still make sense. Listeners face the threat of having to decode language in a new or unusual way, yet they still feel safe after realizing the words themselves have retained their meaning. Slate offers a good article12 discussing theories of humor more in depth.
So, why do we sometimes attempt and fail at humor? The theories touched upon above suggest that going too far beyond or not far enough at either creating incongruity or threatening a violation are reasons for humor to fail. For example, it would be very incongruous to stand up and shout expletives in the middle of the work day in an office. However, this would probably go too far in violating congruity for people to find funny. Or, from the benign-violation theory perspective, this scenario would meet the threshold for providing a threat, but people might not know whether they are safe from the person screaming curse words. Therefore, they might react in fear rather than humor.
Whether you subscribe to either theory above or another, your use of humor is an active attempt to slow down users’ ability to process information. Researchers call this “elaboration,” a fancy word for paying close attention. Users elaborate on humorous messages because the incongruency or violation of the norm requires closer scrutiny to process the message.
Espen Brunborg says that using comedy to slow users down might actually enhance the experience. When it comes to processing information, we shouldn’t be afraid that this slowing down will negatively impact the experience. Users are unlikely to notice, unless they find the humor inappropriate. The benefit of having users engage in elaboration while using your product is that this has been shown to lead to increased processing and greater recall of content. If users engage in increased elaboration of your experience and content, researchers suggest13 (PDF) they will have a more memorable experience.
We need to understand context in order to use humor appropriately. Researchers have identified different types of humor. Choose the type according to the situation in order to increase the likelihood of success. We can often label attempts at humor with more than one category. Below are six types researchers have defined.
This puts two or more elements together to produce a humorous contrast. Apple’s old “Get a Mac” commercials14 featuring our friends Mac and PC were examples of comparison. There was humor in comparing the hip and cool Mac to the boring and stuffy PC. It also had elements of exaggeration (covered below), given that it is doubtful Mac users share all of the traits of the Mac in the commercial (and, likewise, the PC users with the PC).
This attributes human characteristics to animals, plants and objects. Personification helps us understand complex concepts and might also make people more receptive to information17. Clippy, the Microsoft Office assistant, is an example of personification. Microsoft’s hope was that a funny personified paperclip would help users learn critical tasks in the Office programs. Clippy is no longer with us, but personification continues. Users found Clippy to be annoying and intrusive, highlighting the need for us to understand our users and their context before bombarding them with what we consider to be humorous. Clippy actually slowed things down, a death sentence for any product meant to promote productivity.
This overstates or magnifies something out of proportion. Exaggeration is often used to drive home a point. Researchers have found evidence that exaggeration makes people more aware you are trying to make a point, but not necessarily more open to the point you are making. “It took me forever to write this sentence” is an example of exaggeration — although Smashing Magazine’s editors might feel it’s true.
This uses elements of language to create new meanings that result in humor. Researchers have found20 that people are better able to remember puns over other types of information. You could take advantage of puns to make parts of your experience more memorable or to increase the likelihood that users will remember certain parts of their experience (such as their password). David Pope’s post on SAS’ blog21 uses puns to tie together relevant terms from SAS’ product to tell the story of how the company has evolved over time.
This ranges from a funny face to a ludicrous situation. Sarcastic comments and situations could be classified as silliness. We see a lot of silly humor online and in movies. I opened this article with an example that you could classify as silliness. Philosophers suggest22 that this type of humor allows us to laugh at ourselves, a potential for removing barriers to learning and critical thinking.
Humor can arise from an unexpected situation. A spring-loaded glitter bomb23 is an example of a surprise. People who think they are opening a letter are not prepared for the blast of glitter that covers them. Not everyone would find it funny, but the intent is to create a surprisingly humorous situation.
Use humor at the appropriate time and place in the experience. Remember that humor can enhance your relationship with users. Mix in humor to build your brand and relate to users. Humor is perfectly appropriate in otherwise benign situations: successfully sending an email, placing an order for food or updating profile information, to name a few.
For example, if someone has just successfully completed a transfer of money from their checking account to savings account, you might present them with a humorous message about building their nest egg. On the other hand, if someone doesn’t have enough funds in their account to cover a bill they are trying to pay, they probably would not appreciate a humorous element that reminds them of their financial situation.
Unless your experience focuses on humor, such as The Onion’s, there’s no reason to be slapstick or go overboard. Humor can become a distraction when it’s too much of a good thing. What follows are examples of when it is appropriate.
Current and future clients and staff will view your “About” page to learn about your culture. Highlight your sense of humor on the page if appropriate. The “About” page is an opportunity to show visitors the type of people they will be working with. EY Intuitive’s staff chose the photos below for their “About” page. Many of the staff express a sense of humor through body language or props. Imagine how many people who visit the office ask Michael how his box-on-a-coat-rack friend is doing, or ask Kieran whether he always wears his superhero disguise around the office.
Researchers have found that people tend to pay closer attention when they encounter appropriate humorous messages. The folks at Slack have been masterful at getting people to pay attention to their product updates (shown below). Perhaps there are ways to present end-user license agreements (EULAs) and other traditionally tedious documentation in a way that better grabs the user’s attention. Even though your EULA might need to meet the needs of those with a law degree, your images or visualization of the EULA could use silliness to make it less taxing to read.
You can use humor to inject personality into the relationship between your brand and users. We don’t typically think of signing up for insurance and workplace benefits as being amusing. The level of complexity can be overwhelming.
ALEX28 is a tool for communicating employee benefits. It builds its brand around humor to convey different benefits and options to employees. ALEX is careful not to go overboard, instead relying on subtle humor through images and a relaxed conversational tone (see below). Jellyvision, the company that created ALEX, maintains a sense of humor across the brand — for example, in its engaging blog posts29.
The Outline team intersperses elements of humor throughout its experience. For example, the floating heads and other objects next to the articles on its home page provide a humorous glimpse into the topics of the articles (see below). Silly wavy lines establish a shared language with users, who come to associate the silly wavy lines with the appearance of quotes.
As done with ALEX, you will want to use humor in a consistent way and tone if it will be part of your brand communication. It should be consistent across channels and media. For example, humor on your website should carry over to your marketing material. A content style guide, similar to MailChimp’s35, would help with the consistent application of humor, regardless of who on your staff is creating the content and where that content will live.
Chatbots are growing in popularity across industries. People want their chatbots to have personality, including humor as appropriate. In an article for NPR36, Shay Maunz writes about the need for chatbots to have a warm and human-like personality for long-term success. You will need to account for some level of humor if you want your chatbot to have human-like conversational aspects.
Many websites have humorous 404 pages. You can curb the frustration of users not finding what they are looking for with a well-done humorous 404 page. Agens37, a Norwegian design and development studio, uses humorous images and animation on the theme of being lost in space on its 404 page. Equally important, it surfaces a link to existing content, allowing users to quickly navigate to a page that potentially meets their needs.
The folks at Blue Egg41 use humorous video and (slightly annoying) sound on their 404 page, linking directly to the home page.
You can damage your brand or experience if you use humor inappropriately or at inappropriate times. Most users want a quick and easy experience – don’t use humor to extend the time it takes a user to complete a task. For example, adding a knock-knock joke or funny comment to a page-loading screen is fine, but making the user click through a knock-knock joke to access account information is not.
Another option is to introduce humor tactically based on the user or company using your application — for example, going for a silly interface if you’re a startup but staying fairly straight-laced if you’re serving a government agency or bank. You could also let users choose when humor is presented. MailChimp accomplishes this with its “Party Pooper Mode.” Users who want the functionality of MailChimp without the humor can use this mode to remove some of the funnier elements of the application.
Users usually want to accomplish important tasks quickly. Your humor shouldn’t impede their progress or cause confusion. Suppose you’re making a large purchase online, and you receive the message shown below after submitting your payment information. Not only is it unclear what has happened and how you can remedy the situation, but the laughing emoji comes across as overly sarcastic and condescending. You would likely feel confused about the status of your payment, frustrated at the levity with which the website treats the situation, and angry that you’re not presented with a quick and easy way to resolve the problem.
People often couch mean or negative comments in humor. Don’t make fun of your users. Messages conveyed in a digital medium can suffer from a lack of context, tone and intonation. That’s why so many people type “JK” (just kidding) after writing something intended to be humorous; some forms of humor demand visual and aural cues that tell us someone is joking. Users shouldn’t think you are making fun of them or being deliberately insensitive.
Groupon found itself in hot water after a failed attempt at humor in an ad that ran during the 2011 Super Bowl. The ad made light of the plight of people living in Tibet in a tasteless way. The media and customers noticed this immediately, with many outlets writing about47 the poor use of humor and the resulting damage to the brand.
UX designer Brandon Dorn has an excellent post on “confirmshaming.”48 Confirmshaming is the insulting microcopy that many digital properties have started to include when users try to opt out, withdraw membership or ignore a call to action (for example, declining to sign up for a newsletter). As Dorn puts it, confirmshaming is the digital equivalent of a salesperson following you around a clothing store telling you that your current outfit is ugly. I’ve also discussed confirmshaming in my chapter on framing content in Design for the Mind49. Confirmshaming is insulting and disrespectful to users. If you feel a need to insult users in order to try to strongarm them into doing something, reconsider what you are asking them to do and why you don’t expect them to willfully engage in the behavior.
Users rely on you to provide accurate information and service. You will not succeed if they lose trust. Poorly done humor could decrease trust in your product. Avoid it by testing copy with users for both understanding and impact. Also, consider investing in a professional copywriter with experience in comedic writing.
I confess that I don’t enjoy anything about April Fool’s Day. A day dedicated to lying doesn’t sit well with me. Nevertheless, April Fool’s pranks have proliferated on the Internet. Often, these pranks waste time and backfire by misleading users. Some users might find a particular April Fool’s prank to be extremely humorous, but I don’t think it’s worth the risk of bad press and angry users. Similarly, avoid any attempt at humor that could mislead users and potentially cause them anxiety, regardless of what day it is.
You can do damage if you come across as condescending or insulting. Don’t prolong or distract users from completing critical tasks. As with any design element, if humor doesn’t improve the experience, don’t use it — even if the competition does. You are better off not using humor than attempting to use it and risking having to apologize.
Conduct usability testing to improve the chances that your use of humor will align with user expectations. Additionally, create personas to guide the use and type of humor that you employ. You could direct certain humorous elements towards specific personas and tone down the humor for other personas at various points in the experience.
Humor can give you an edge with users. Done appropriately, it can defuse a stressful situation, help build your brand and convey your message. You don’t need a funny product in order to use humor. There are many opportunities to use it appropriately. Depending on your product, you could start to incorporate it in your “About” or staff bio pages, or try it on your 404 page and gauge how the audience reacts. Test any attempt at humor prior to going live. Be open-minded and willing to take criticism. Users are not monolithic in their sense of humor, so be sure not to go overboard if humor isn’t the purpose of your product.
(cc, vf, yk, al, il)
The average American spends almost 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 pop-ups, 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.
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 each shopper based on their purchase history, location and time. Starbucks, for example, collects information about its loyal customers through its branded mobile wallet app: where they are, what drinks they purchase or the type of music8 they listen to (you can build a playlist within the app). The Sephora to Go app recommends new products based on the user’s purchase history and pushes a notification to their phone or smart watch whenever the user is around their store.
What’s in it for shoppers (or those millennial shoppers who still somehow frequent bricks-and-mortar stores)? Many enjoy the frictionless experience of proximity payments: faster than most EMV chip cards, easier and more secure than carrying a physical wallet. Modern point-of-sale terminals accept Android Pay, Apple Pay and, most recently, even Selfie Pay, a service by Visa11 in partnership with BMO that verifies a user’s identity using biometrics and, specifically, a user’s selfie. And unlike most social media selfies, mobile payment data is protected with a technology called tokenization; all marketing messages require prior affirmative consent from consumers, or “opt-in.”
More than half12 of all YouTube views come from mobile devices. That’s amazing, considering how long it took to buffer videos on mobile just a few years ago. The average download speed on mobile is now over 19.27 Mbps, a 30% year-over-year improvement13. Thanks to technology enhancements, advertisers can now push more interactive digital content to shoppers on the go. Obviously, people interact with content differently on mobile, so marketers trim videos and add text overlays for users who don’t have headphones at hand in a public space.
Mobile, social and video forge a powerful combo for marketing ROI, which has now also become easier to track. Video ads are engaging: 80% of users15 recall a video ad they viewed in the past 30 days. Video accommodates native publisher formats, with multiple options for mobile placement — pre-, mid- and post-roll ads, interstitials in apps, video banners, etc. Marketers can now measure video ROI not just through brand awareness, but with more tangible performance metrics — and even offline. For example, Google’s most recent ad product offering16 captures data on how video ads are driving foot traffic into physical stores.
Conversation sets the foundation for sales and good customer service — just think of your local mom-and-pop store. Chatbots scale these one-on-one interactions to cater to millions of consumers via text messages. Whole Foods, for example, has a Facebook bot that assists shoppers with recipe suggestions.
Similarly, Burger King and Pizza Hut customers can order food directly19 through Facebook Messenger and Twitter bots. But chatbots don’t just replace salespeople to speed up customer orders. The wealth of data that these chatbots have about a particular Facebook user allows brands to learn about that user’s preferences and to personalize communications accordingly. Deep machine-learning algorithms will improve bots over time, giving them a competitive edge over any local shop assistant in predicting consumer behavior. Brands will upsell and cross-sell products and services directly in a shopper’s inbox — right next to their friends’ messages.
Brands now have many sophisticated ways to collect consumer data using the Internet of Things (IoT). Voice assistants such as Alexa, Siri, Google Assistant, Microsoft’s Cortana and Line’s Clova allow brands to listen — literally — to their customers. More than 8 million owners21 of Amazon Echo’s Alexa can easily order via a voice command from Amazon’s growing network of partners, which now include Domino’s, Uber and Jamie Oliver.
Wearables, connected objects and smart packaging shorten a shopper’s path to purchase. For example, Amazon’s Dash buttons connect to people’s home Wi-Fi and Amazon accounts. Whenever an Amazon Prime member runs out of a detergent, batteries or another household staple, a simple press of a Dash button will automatically place an order, and the product will be delivered in two days or faster.
For marketers, this opportunity to be very close to consumers in their homes means they need to handle customer data extra cautiously. Purchase trends data are useful for retention marketing and lookalike targeting, but home devices are considered private space. To avoid being perceived as creepy, marketers shouldn’t make any personalized product recommendations related to sensitive topics such as health.
Snap recently went public at $24 per share, capturing a growing slice of B2C marketing budgets with a promise to reach millennials, today’s most coveted demographic, through native video content. Native ads are expected to take up to 53%23 of all display spending this year, largely on mobile.
Branded (i.e. promoted) stories on Facebook, Snapchat filters and sponsored articles on Buzzfeed are all examples of native ads. They look like the publisher’s organic content, which is great for engagement rates because people tend to pay more attention24 to such ads. At the same time, some studies show that users feel cheated25 when they click on an “advertorial” that wasn’t clearly labeled as such.
Search ads, the most popular native ad type (and by far the most accessible28 one), are morphing into new formats, as Internet giants such as Google, Apple and Tencent are adding new app integrations into their mobile ecosystems. For example, people can get a Lyft or book a table via OpenTable all within the Maps app. Search partnerships create a win-win situation for vendors, who get an easy entry to the market, and for publishers, who are building mobile ecosystems: WeChat’s average revenue per user29 is estimated at over $7, with over 8,000 brands currently using the platform. What a lucrative way to retain users and keep them engaged within one app!
As digital and offline experiences got more intertwined, new interactive advertising formats emerged, with a promise to capture the most scarce and valuable marketing asset of all — people’s attention. Still, marketing to millennial shoppers remains a challenge. It’s now a job for engineers, data scientists and designers, maybe more so than marketers. It will require scaling one-one-one brand communications with technology, while reducing consumer friction with thoughtful design — even to the point of making a purchase so easy that it is literally just the touch of a button.
(da, vf, yk, al, il)