CSS is an amazing tool which we constantly use but we don’t seem to honor it appropriately. Whenever I see the growing browser support of the :focus-within selector, the much wanted justify-content: space-evenly for Flexbox or how great CSS Grids already work, I feel really grateful to have such awesome tools available to work with.
And with advanced new media queries such as prefers-reduced-motion, screen and (color), or pointer, we get amazing tools to improve accessibility and usability of our websites. Just let the user be in control how to view your amazing design and it’ll be a success for everyone.
The :focus-within CSS pseudo-selector11 is a nice way to enhance your form sections further. Browser support12 is still a bit limited so far but it’s already worth thinking about adding it to your code to improve design and usability for those whose browser support the selector already.
The CSS Flexbox Module specification now has a new value justify-content: space-evenly13. This new setting places even space between and to the outer of the elements — a feature we all wanted to have very much in Flexbox. It already works in Firefox, and Safari Tech Preview and Chrome Canary have the support as well.
16 When designing a date/time picker, keep in mind that every date picker may fit every interface, but not every interface actually needs a date picker. (Credits: Topvet.net17)
Hampus Sethfors18 and Hugo Giraudel19 collected a bunch of real-world experiences regarding accessibility on websites. These two articles give a lot of insight on how to understand accessibility and usability of websites better.
20 Zooming problems: Some users with low vision point to layout and navigation problems when zooming or increasing font-size. (Image source21)
Whether you’re into good ol’ drawing and painting, or quick editing in Photoshop or Illustrator, one thing’s for sure: they’re all creativity’s best friends. Some draw pictures all day1, while others find their inspiration in uncommon sources2 in order to break out of the box. Whatever it is that you decide to do, it’s good to challenge yourself more often and get out of your comfort zone. If you don’t, you may never discover something that you love doing, or perhaps even worse, never learn a whole lot about yourself.
If your excuse are pesky blackouts or simply having no clue what to create nor where to get started, don’t fret! Even the most talented artists out there practice so much more than you’d ever imagine, and hone their skills by trying out copywork3. The most important thing is to be confident and simply give it a try. For more encouragement, I’ve collected a good number of inspirational artwork that is bound to give you that spark you need to get started already!
An editorial illustration for DB Magazine in the US on the subject of the dangers of hackers within the hospital system. Beautiful style, colors and patterns.
Playing with color, shapes and shadow. That’s what you’ll see in this series called Colorful Boxes. Absolutely love the very bright colors in this one.
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:
Are we designing a date picker, a date-range picker or a time picker?
Should the user be able to type in a date in the input field or only select predefined values using a date picker?
Should the date-picker overlay appear when the user clicks on the input or when they click on the calendar icon (or both)?
Should the date picker contain default prepopulated values? If yes, what values should be default?
Should we include some sort of “previous, current, next” navigation? If so, how do we design it for days, months and years?
Should we enhance the experience by displaying availability, price, etc.?
For date-range pickers on narrow screens, should the overlay automatically disappear once two dates are selected, or only when the user clicks on the “Continue” button to proceed?
Should the week run from Monday to Sunday or from Sunday to Saturday?
How do we avoid displaying unavailable dates or zero-results dead ends?
Is a date picker the right pattern to use for date selection in the first place?
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.
2 You might not need a date picker after all. A vertical navigation between days might be enough as well. A TV guide on HD-Plus3. (Large preview4)
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.
5 Ruter6, a beautiful Norwegian trip-planner, uses a 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?
Inline validation matters. Zvv.ch8, a Zurich trip-planner, is very well designed, but it allows for ill-formatted input that isn’t validated client-side. (View large version9)
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!
10 Nsb.no11, another Norwegian trip-planner, accepts any kind of input, be it with or without separators, with a hyphen or slash. It’s a good example of a good, forgiving UI. The only issue: the input “August 17” is accepted but not understood.have
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.”
1516 Kremlin.ru1817 accepts smart input. You can specify a date range by typing “January – February” or a specific day in natural language.
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?
19 Google Flights3920 is one of the few airfare search websites that sets default values for dates. On July 3, the dates preset are July 19 for departure and July 23 for return. The dates are probably based on common customers’ trips. (View large version21)
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.
22 A date picker isn’t necessary for selecting a day or time. You could use a set of buttons instead. However, hiding some of the options in an accordion/drop-down might be a bit less noisy. Default value (current time) matters in a TV guide. Sr.de23. (Large preview24)
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.
25 Skyscanner26 clearly separates Saturday and Sunday from the rest of the week. Apparently, that’s when many people travel. (View large version27)
28 Swiss29 uses a vertical separator to help customers visually distinguish between weekend days and work days. (View large version30)
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.
31 Ryanair32 displays available and unavailable options right in the date picker. This eliminates a frustrating zero-results-page. (Large view.33)
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.
Airbnb6534 prominently highlights days with the most available homes with a green dot. As a result, a customer can easily tap through the months and find dates that provide more options. (View large version35)
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.
Bahn.de36, a German train ticket service, doesn’t include the year picker in the calendar overlay. However, it includes a mini-stepper for days, months and the time (in one-hour jumps). It’s also possible to type in the date without using the calendar. (View large version37)
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).
Google Flights3920 displays the starting price for each day and highlights the options with the lowest price. Notice the use of mini-steppers and the change of view above the calendar overlay. Also useful: If Google finds that a flight is cheaper a few days prior or after the selected date, it suggests the date as a hint in the search results. (Image view40)41 Sbb.ch42, a Swiss train ticket service, allows users to jump through days with a mini-stepper residing within the day, month and year input fields. (View large version43)
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).
44 Ns.nl45, a Dutch train ticket service, doesn’t include the year picker in the calendar overlay. Notice that the actual date isn’t displayed — instead, a work day (Monday, Tuesday, etc.) is displayed. It also includes a mini-stepper for days, months and the time (in 5-minute jumps). (View large version46)
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.
47 Date pickers… everywhere! Whenever time matters, a date picker is likely to be present as well, be it medical appointment, a spa treatment, a boat rental, a flight ticket, a summer cottage rental or a TV guide. Example: SVTPlay.se48, a Swedish TV company. (Large preview49)
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).
50 Sj.se51 displays the calendar in plain sight by default as the user focuses on the departure input field. Notice how, instead of the year selection, the upper-right corner is reserved for the time slot. (View large version52)
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?
Qantas53‘ new website looks wonderful, but the interaction with the date picker is slightly annoying. There is too much jumping around two date pickers when selecting the dates for flights. (View large version54)Norwegian55, the airline, highlights available and unavailable flights. However, both the start date and end date prompt a standalone date picker each. It’s not necessary: Displaying just one date picker might be enough.
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.
Whether you love or hate the company, RyanAir58 does many things very well on its website. The booking flow is seamless and fast — achieved with progressive disclosure and driving the user forward through the input. (View large version59)Wizzair60, another low-cost airline, uses a pattern similar to Ryanair for date input. In fact, usually you don’t need more than eight taps to start exploring flights. Notice how heavily unavailable flights are faded out, making filtering easy. (View large version61)
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.
626364 Airbnb6534‘s date picker allows the user to select the check-in and check-out dates with as few as two taps. It also supports keyboard shortcuts for faster navigation between months.
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.
68 A concept69 by Ivan Bjelajac for a date input using a conversational interface and suggestions.
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).
82 The calendar view for Dohop uses background color coding to indicate low and high pricing. For the sake of accessibility, it might be useful to look into a slightly different color palette, but the design seems to be quite effective. (View large version83)
84 Instead of using a checkbox for “One way” on Dohop888581, it lands in the bottom-right corner of the calendar overlay. Also, the calendar highlights direct and indirect flights, as well as unavailable connections. (View large version86)
87 On Dohop888581, the selection of flexible dates provides not only options for specific months, but even more general date ranges, such as winter, spring, summer and fall. (View large version89)
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.
91 A birthday input slider92 requires users to slide through months, days and years. Typing in the actual birth date might be a tad faster. (Credit: Suzanne Elizondo)
Where Does This Leave An OS’ Native Date Picker? Link
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.
96 A native date picker is useful but quite limited. If you need just one fixed date, like a birthday, it could be a good issue — you do need a fallback for desktop views though.
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.
97 Dineout98 breaks down its interface into a few small components: offers, dates, time and number of guests. (View large version99)
100 A classic example of a well-designed interaction for date selection and related time-slot selection can be found on Topvet.net101. However, since there is no indicator for the availability of slots for each day, the user can’t know up front whether a day has availability in their preferred time range.
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.
102 What if the user was asked for the date first, and the location would be provided (with an auto-complete) inline? An interesting example for a calendar interaction. (Image: Ramy Khuffash103)
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.
104 Matthew Talebi’s mockup105 of a slightly better appointment-booking interface: time range first, date second, specific time slot third. (View large version106)
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.
109110 Treatwell.nl111 provides a list of days lined up horizontally and of time slots lined up vertically, on both mobile and desktop.
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!)
123 Spidersoft’s alternate date-picker124 is a date constructor rather than a date picker. You might need to get used to the interface first, but for websites dealing with many historic or scientific events, it might be an option worth considering.
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.
128129 For the birthday input, Gmail130125 uses a custom drop-down for the month and a numerical input for the day and the year. That’s a clever way to avoid ill-formatted input.
131 Surprisingly, Yahoo132126 uses the same pattern as Gmail, a dropdown for the month and a numerical input for everything else.
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:
Decide whether you are designing a date picker, a date-range picker or a time picker.
Is the flow between input fields and calendar overlay seamless, with the next step triggered automatically?
Is date picker the right pattern to use for date selection in the first place? Would it be faster to have predefined options as radio buttons instead, or a slider, or a native OS date picker, or a conversational interface?
How do we avoid displaying unavailable dates or zero-results dead ends?
Consider localization techniques; for example, a mix of a “month” drop-down and manual date input for month and year for birthdays.
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.
Should the user be able to type in a date in the input field or only select predefined values using a calendar overlay?
With a numerical input, is inline validation robust and reliable enough for various separators and ill-formatted inputs? Is it also keyboard-accessible?
Do we allow for “smart” date input? For instance, do we accept “three days ago,” “yesterday,” “next week” or “in July” as an input?
Should the date-picker contain preselected default values? If yes, then what values will be default?
Do we keep the expected date format suggestion (placeholder) when the user activates the input field?
Persist data after a page refresh, and add a “Reset” link to enable the user to cancel their input easily or not?
Do we add a mini-stepper navigation for quick jumps between days, months or years — right in the input field and in the calendar overlay?
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.
Ideally, any date selection should be achieved within at most three taps.
Should the date-picker overlay appear when the user clicks on the input or with a click on the calendar icon (or both)?
How many weeks, months or days would you display in a given view?
How do we incorporate any localization techniques? For example, should the week run from Monday to Sunday or from Sunday to Saturday?
How do we indicate the current day and time in the calendar overlay?
Should we include some sort of “previous, current, next” mini-stepper for quicker navigation?
Figure out the critical detail that’s important to your customers and expose it prominently. It could be availability, pricing, public holidays. Use colored dots or background color-coding for different options.
Did you make sure that the date-picker disappears when the user clicks outside the date-picker overlay? Do you have a “close” button as well?
Is it possible to escape to the numerical date input field?
Should user be able to clear the selection with a “Reset selection” button?
The simplest option is to combine a vertical slider for days, with a horizontally laid out data list of time slots.
What’s more useful: asking for the time slot first, or for the date first? Time selection could act as a filter to remove all unavailable days.
Consider adding most frequently used timeframes and suggest quick shortcuts to the most common selections.
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’!
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.
9 Get ready for takeoff and never lose your vision out of sight. Vexel’s icon set is inspired by the young and lively startup scene. (Full preview12103)11 Colorful and everything but buttoned up — the icons provide a fresh perspective on the business theme. (Full preview12103)
“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.
Go to the same website on your device, and install the iOS 11 Beta Configuration Profile6. This will let you get iOS 11 Beta and updates through the normal iOS update mechanism. (A free developer account is required.)
7 Download Xcode 9 and install the iOS 11 Beta Configuration Profile. (View large version8)
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.
There were updates across the MacBook and iMac lines, including a tease for a new iMac Pro12 with very high-end components (up to 18 cores) and a new space-gray finish, to be released in December.
These new iMacs (and MacBooks with an external GPU) can be used to create virtual reality (VR) content, and this was demoed, with ILM showing off a VR Darth Vader. Steam, Unity and Unreal VR engines will release Mac versions later this year.
The new macOS will be called High Sierra, and, as the name indicates, this release is meant to be a refinement of Sierra. Apple File System will make its Mac debut in this release.
The iPad Pro also got component bumps, and the smaller size has been increased to 10.5 inches. The video refresh rate on both is variable and up to 120 Hz (twice the previous speed).
iOS system apps got updates, including handwriting recognition and document scanning in Notes, live photo effects, and a new Files app that lets you get to the files inside of apps directly.
Apple announced a new smart speaker named HomePod16. It describes it as a cross between a high-end speaker like Sonos and a smart speaker like Amazon Echo. It’s also scheduled for December, but I’d expect this to be available to buy for the holidays.
Apple Watch has a new Siri watch face that gives you information that it thinks you want (using machine learning). This is a lot like Google Now, but it does it all on the device, so your privacy is protected.
Apple Pay supports peer-to-peer payment through iMessage, so you can split up a restaurant bill with just a text message.
The App Store has been totally redesigned. It looks a lot like the Music app and puts Games into its own area. Developers can now roll out releases over time, among other features.
Amazon Prime Video will be available on Apple TV later this year.
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.
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:
reorder photos in an album,
move photos from one album to another,
move all of an album’s photos to another album,
copy images between this app and other ones.
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.
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.
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 UITextFields to .username and .password, respectively.
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.
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).
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.
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:
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.
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.
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:
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.
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?”
How to Find Someone’s Email: Strategic Guessing To Find An Email Address
This strategic hack was coined by Ginny Soskey, Section Editor of the HubSpot blog. Here are the steps in the process:
Step 1 Search for other company email addresses.
If our contact’s email address isn’t readily available, we have to do a little more digging. There’s typically one email structure for each company, so everyone who works for that company has a consistently formatted email address.
For example, firstinitial_lastname@company.com. If we can find someone’s email address from that company, we can likely copy that structure to determine our contact’s email address.
Where can we find company email structures?
Check out LinkedIn. If we find a first connection that works at the company, we can look at the “Contact Info” section of their profile to see if they included their work email.
Press releases are a hidden treasure for finding the structure of a company’s email address. Search for a company’s recent announcements with Google or on their website and, if they have a PR person, their contact information should be at the bottom of the release.
Try the company’s blog as well, it will usually include the author’s contact information at the bottom or top of the page.
Pro Tip: Try this website to quickly find a company’s email convention based on their domain.
Step 2 Plug the person’s information into that structure.
Once we find the company’s email structure, we can plug in our contact’s name. For example, after some digging, we find the company’s email address to be:
firstname@company.com
Now let’s plug in the rest. Say our contact’s name is Steve and he works for Culture Company. Here’s what his email would look like:
This isn’t fool-proof though. Steve might actually be a pet name for Steven or Stephan or Stephen. We should try all possibilities by including these emails in our list as well:
steven@cc.com
stephan@cc.com
stephen@cc.com
Pro Tip: Use thrust.io to generate a list of these possibilities automatically. The free tool pulls any valid email addresses for your contact’s given name and domain. Here’s how Sam Parr used this tool to connect with 27+ CEOs without any introductions.
Step 3 Check the email with HubSpot’s CRM.
Once we determine our list of possible email addresses, we should compose a message in Gmail and enter each email into the “To” line. If they’re valid, HubSpot Sales will show us their contact profile with information like where they work and their social media profiles.
See how Brian’s information appears in his contact profile? We know this is a legit email address. On the other hand, if the email isn’t valid, we’ll get a blank profile like this one:
Step 5 Plug these options into HubSpot, and find the winner.
Type in all of the options into the “To” line of a new email, and make sure HubSpot Sales is installed. Once we see our contact’s information pop up, we know we have the right email.
Mailtester will tell us whether we’ve found a valid email address. Let’s try it out with our previous example: fredflinstone@gravelcompany.com.
Invalid, just as HubSpot told us in the first approach. A valid email will show up on this screen in a green box and display “Valid mail domain” instead of “Invalid mail domain.”
Step 4 Conduct a final test in HubSpot before composing the email.
Navigate to HubSpot Sales and type in the validated email address in the “To” line of a new message. If we see information appear in their contact profile section, we’ve confirmed that we found the right email address. We can also conduct this email verification test using another tool, Rapportive.
How to Find Someone’s Email: Scouring the Internet to Find An Email Address
Step 1 Let’s try googling our contact’s information in one of these formats:
Step 2 If none of those work, look on the company’s website
The goal here is to verify the @company.com email structure. To do this, we can look at the company’s blog to see if they include contact information for authors, we can check the bottom of their PR announcements for contact points, or we can sift through their “About Us” page in case they’ve included any employee contact information.
Step 3 Once we’ve verified the structure, try Google again.
Again, we can conduct a common search, such as “Fred Flinstone @company.com” or if we want to limit our search to just the company’s website, try this search:
Pro Tip: If we can’t find our contact’s company email address, we can turn to their personal email address. Perform a search like the one below to see if they have a personal website.
Step 4If we don’t find success here, we can turn to social networks.
Let’s start with Twitter. Does our contact have a Twitter handle? We can also Google search this: “Fred Flinstone Twitter.” Check out their description in Twitter for clues to other websites where we might find their email. If that doesn’t work, we can try following our contact and then tweeting or direct messaging them to ask for their email.
The key here is to let he or she know why you want to get in touch. Be specific and get to the point, but don’t tweet a simple “what’s your email?” And remember, we only have 140 characters to send something compelling.
Pro Tip:Try Twitter’s advanced search to see if our connection ever tweeted out his email. In the “Advanced Search” menu type (at)(dot) in the “All of these words” space, and then the person’s twitter handle in the “From these accounts section.”
No Twitter? Try LinkedIn. Do the same search here: “Fred Flinstone LinkedIn.” Once we find their profile, we can look for a personal website or an email which might be listed under “contact info” right underneath their profile picture.
No luck? Let’s try sending them a request to connect.
If we find any common interests or connections, use these to increase the “compelling” factor of our message. Keep in mind we only have 300 characters to urge our recipient to accept the invite. People also respond well to compliments, so we can also try something like this:
Once (and if) they accept our invitation to connect, we can message them in more depth regarding our outreach and then request their email.
Pro Tip: As soon as they accept our invitation to connect, we have their email address. Click “Connections” in the LinkedIn Nav bar and then click the settings gear in the upper right corner of the page. Under “Advanced Settings” click “Export LinkedIn Connections.” Voila – we automatically have all of our connections email addresses [Click to Tweet Tip].
Still not working? We can turn to Quora. Let’s type in [First Name] + [Last Name] in the search bar to see if our contact has a Quora profile. If they do, click their profile and we can gather more information about their social profiles or websites.
Look at their activity to see what they’re interested in, if they’ve asked any questions, and what questions they’ve responded to. Once we gather more information about our contact, we can try messaging them by clicking the “Message” button on their profile page.
Pro Tip: We can reverse email lookup with Facebook to verify that we’ve found the right email address. All we have to do is type in what we presume is our contact’s email address in the search bar. If a profile appears with our contact’s name, we know we’ve found the right email address.
Lost email = found. Just like that. And by transitive property..
Email found = door opened.
And opened doors can lead anywhere… to a new relationship, an overdue reunion, a business deal, or life-altering insight.
Find emails, open doors.
Now that the easy part is over, let’s look at how we can build meaningful relationships with connections through proven examples.
From: Yesware.com
How to Find Anyone’s Email: 13 Little-Known Tricks
1. Clearbit – Super Accurate Email Finder That Lives In Your Inbox
This Gmail Chrome extension finds email addresses in less than five seconds, and we’ve found that it’s accurate 97% of the time. Just plug in someone’s company name with either their first name or job title. Once Clearbit identifies an address for you, you can one-click compose an email to that person.
2. Datanyze Insider – Super Fast Email Address Lookup For Chrome or Firefox
Datanyze’s browser plugin lets you look up anyone’s email address by highlighting their name wherever it appears online. The Insider Email Finder then pings likely email addresses, finds which one is active, and displays a link to the correct address.
3. SellHack – Search Up To 10 Emails For Free Per Month
Similar to Datanyze Insider, Sell Hack is a handy browser extension that checks publicly available data sources to find someone’s email address. The free plan will let you search up to 10 emails per month on Chrome, Firefox, or Safari.
4. Email Hunter – Find Email Addresses In Bulk By Company Domain
This one’s great for account-based sales. Punch any company domain in and you’ll quickly get a list of all publicly available email addresses associated with it. You can search up to 150 domains for free each month, and plans start at $49/month if you’re interested in searching more.
5. Headreach – Search by Name, Company, or Website
Headreach allows users to search for prospects by name, company, website, or by using the ‘advanced search’ option where you can search by job position (easy access to decision makers). Once you find your prospect, click “find (name)’s emails and social profiles” and they’ll be added to your contacts. Headreach also includes a log for easy access to all of your searches.
Findthat is a quick and easy way to search and discover exactly who you’re looking for. This database includes several diverse plans. Whether you keep it simple with the free plan (includes 15 monthly credits) or get the whole team involved (their team plan runs for $149 per month with over 3,000 credits).
7. Anymail Finder – Guesses your prospect’s address using email patterns
Just click on the toolbar from your Chrome browser and you can add your prospect’s name and their company website. Anymail Finder guess their email address in seconds and let you one-click copy it.
A note: if you’re looking for addresses at an account where email address patterns vary, it’s going to be tough to accurately guess your prospect’s addresses using Anymail Finder. For example, at Yesware our earliest employees have firstname@yesware.com as their address, whereas more recent employees have firstinitiallastname@yesware.com as their pattern. Anymail did not pick this up. Matthew’s email address is accurate above but others were not. Stick with Anymail for companies where you know one pattern applies.
8. Voila Norbert – Quickly Find And Verify Someone’s Email
Search by first name, last name, and company domain. Norbert pings the mail host to confirm the correct email address, giving you 50 free searches per month.
While simple to use — you don’t need to install a plugin — Norbert does not check for catchall addresses, and it limits the number of queries users can conduct (SMTP servers could block the service if pinged too frequently). In our own unscientific test, Norbert was able to correctly identify three out of five email addresses.
This free database contains the email address formats of more than 1000 companies. Search by company name, industry, or geographical location to find the pattern your prospect’s company uses across their corporate email addresses — i.e. firstname@yesware.com, or firstname.lastname@yesware.com.
Small caveat: The site hasn’t added new companies to its listings since 2011, so consider this a tool for prospectinginto established companies only. We had better luck finding email patterns for startups and other new businesses using EmailBreaker (below).
It’s exactly what it sounds like. Use this site to find email addresses of CEOs in companies around the globe.
11. Conspire – Ask For An Introduction, Backed By Data
One of the coolest email tools we’ve come across recently is Conspire, an app that analyzes your contact list to identify mutual acquaintances who can introduce you to the person you want to reach.
Simply sign up with your existing email account and search for the person or company you’re interested in emailing. Conspire will churn out a relationship graph showing who has the strongest ties to that person across your extended network, based on factors like frequency, speed, and the length of time they have corresponded.
It even offers prewritten email templates to make your request that much easier. (Although we’d be remiss if we didn’t recommend copying and pasting the text into a Yesware template so you can track what happens after sending.)
By the way, if you’re looking for more email templates to introduce yourself or make new connections, you might want to check out the 18 free ones we offer in our latest email course.
12. LinkedIn Connections – Export Email Addresses To Google Contacts
The good news is that hidden away in LinkedIn’s advanced settings is the ability to export your connections, giving you up-to-date email address in your inbox.
People get asked for their email on Twitter all the time. You can use Twitter’s advanced search to find the last time your contact responded to such a request:
Search for the terms (at) (dot) in “All these words” under the ‘Words” section
Enter their Twitter handle in “From these accounts” under the “People” section
Pro tip: Don’t waste your time searching for the word “email.” You’ll just end up combing through a long list of tweets on the topic of email, and not their actual email address.
You may be able to easily find somebody’s website, Facebook profile, Twitter profile, LinkedIn profile and countless other social profiles, but their email address? Good luck with that!
People protect their email addresses for a reason, and even if you try to run an email address search by Googling somebody’s full name with the word “email,” you’re often unlikely to find anything. Putting it right out there in plain sight on the web invites anyone and everyone to contact them–even spammers.
But in the age of social media, is email still really relevant? Should we all just give up on trying to find people’s email addresses and resort to Facebook Messages and Twitter Direct Messages instead?
Nope. At least not yet.
Why Emailing Someone Is More Powerful Than Contacting Them on Social Media
Email is the most personal way to contact someone. It’s meant for one thing and one thing only–getting in direct contact with somebody. Sure, social platforms offer private messaging features, but in the end, they’re primarily meant to be used for public sharing.
Email is the most professional way to contact someone. If you’re a professional who’s looking to share an idea with another professional, you’re more likely to get a serious conversation going via email. People do business via email–not through private chats on Facebook or Twitter.
People pay more attention to their email inboxes. Not everyone checks their Facebook Messages or Twitter DMs. If they even use these platforms, they’re usually more preoccupied with browsing and interacting on them. Email, on the other hand, is meant for receiving private messages that people know they need and want (think work conversations or subscriptions to newsletters), so they’re much more likely to browse through their inboxes regularly.
Everybody has an email address. Email is the one thing that makes personalization on the internet possible. You can’t sign up for an account on any website without an email address. Facebook may be the largest social network in the world, but that doesn’t mean that everyone uses it. Whether you like using email or not, it’s basically a mandatory part of interacting online.
Even when people do start talking on social media, it’s common courtesy to ask for each other’s email to move the conversation to a more personal and professional medium if there’s lots to be discussed. I see a lot of people on Twitter do this.
Now that you’re probably convinced that email is still the best way to contact somebody (especially for professional matters), let’s take a look at three of the very best tools that can help you find somebody’s email address in as little as a few seconds.
Click through to the next slide to check out the first tool.
Use Email Hunter to Search for Email Addresses by Domain
Screenshot of EmailHunter.co
Email Hunter is probably the most useful tool that you can take advantage of if you’re looking for somebody’s company email address.
It works by asking you to type a company domain name in the given field and then pulls up a list of all the email results it finds based on sources from around the web. Depending on the results, the tool may even suggest a pattern like {first}@companydomain.com if it detects any.
Once you’ve found an email address from the results that you want to try emailing, you can switch over to the Verify tab to get Email Hunter to do some more investigative work on it. You’ll be told whether the address is valid or not.
You’re allowed to perform up to 150 searches for free every month, but if you want more than that, plus the ability to make bulk requests and export results to a CSV file, you’ll need to upgrade to a premium monthly plan.
Make sure to check out the Email Hunter Chrome extension too, which makes it possible for you to get a quick list of email addresses when you’re browsing a company site. No need to open up a new tab and search EmailHunter.co. It even adds an Email Hunter button to LinkedIn user profiles to help you find their email addresses.
Email Hunter Advantages: Fast, easy to use and great for looking up company-specific email addresses. The Chrome extension makes it even faster!
Email Hunter Disadvantages: Limited free use and not at all useful for searching for personal email addresses from free providers like Gmail, Outlook, Yahoo and others.
Use Voila Norbert to Search for Email Addresses by Name and Domain
Screenshot of VoilaNorbert.com
Voila Norbert is another email address search tool that’s both free and super easy to use.
In addition to a domain name field, you’re also given the option to fill out the first and last name of the person you’re trying to contact. Based off the information you’ve provided, Norbert will start searching for related email addresses and will notify you of anything it can find.
The tool works best with company domains because there are only so many users that will have a company email address. Amazingly enough, it even works with free email providers like Gmail. Just bear in mind that if you decide to search for a first and last name with a Gmail.com domain, the results that Norbert gives you may not correspond to the exact person you’re trying to contact, mainly because Gmail has such a massive user base and there are bound to be multiple users who share the same names.
It appears that Voila Norbert can only perform so many searches at a time, which is why there are premium options you can pay for to get more unlimited searches. There’s also a powerful Massive Search option that you can use by uploading a CSV file of names and website domains to get an estimate of how much it would cost to search each one.
Voila Norbert Advantages: Very easy to use and great for finding email addresses based on full names and company-specific domains. There’s the added bonus that it works for free providers like Gmail too.
Voila Norbert Disadvantages: The service is limited to a number of free searches every day and if you are looking for an address for a free provider like Gmail, there’s no guarantee that the email it finds belongs to the correct person.
Use Anymail Finder to Search for Email Addresses by Name and Domain
Screenshot of AnymailFinder.com
Anymail Finder is nearly identical to Voila Norbert, but it has a few subtle differences that make it a worthwhile mention here.
Like Voila Norbert, you can type in a name and a domain to search for an email address. I personally found that Anymail was a lot faster than Norbert, and there was a great little extra feature where my searches and corresponding results were listed in a collapsible tab on the right side of the screen.
The biggest downside to Anymail is that it’s very limited in use for free users, and you’ll notice a counter at the top of the screen drop down by one (starting from 20) every time you perform a new search. It’s not clear if you can get 20 free searches a day or 20 free searches a month, but I suspect that it is a monthly limit. A premium upgrade of about $20 a month will get you 1,000 searches per month.
Unlike Voila Norbert, Anymail Finder doesn’t seem to work with free email providers like Gmail. I tried using Gmail.com as the domain for a search and got an error.
Rapportive is a neat little email tool from LinkedIn that works with Gmail. It only comes in the form of a Google Chrome extension.
Once installed, you can start composing a new email message in Gmail by typing any email address into the To field. Active email addresses that are linked to LinkedIn profiles will display profile information on the right side.
Rapportive won’t give you any suggested email addresses like any of the previous tools mentioned; that’s up to you to figure out. So, you can either use one of the previously mentioned tools to come up with email addresses or you can guess them yourself by typing examples into the Gmail To field like firstname@domain.com, firstandlastname@domain.com or even more generic addresses like info@domain.com and contact@domain.comto see what sort of information appears in the right column.
What’s great about Rapportive is that it can give you some hints about email addresses that aren’t exactly connected to any social data. For example, info@domain.com may not be in use for a particular person’s LinkedIn profile, but if you type it into the To field in a new Gmail message, it may display a message in the right column confirming that it’s a role-based email address.
If you type in an email address that doesn’t show any information in the right column, it probably isn’t a valid email address.
Rapportive Advantages: Useful if you know the person you’re trying to contact is already on LinkedIn and may be used as a complimentary tool to some of the previous tools mentioned.
Rapportive Disadvantages: Lots of guesswork and it only works with Gmail.
And that’s a wrap! Hopefully, you found all of these tools useful in your hunt for email addresses. None of them are exactly perfect, and you may even need to do a little more digging around to make sure you’re searching for the right person, but they’re extremely helpful when a particular person’s email address is nowhere to be found on the web.
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:
All images can be clicked on and lead to the preview of the wallpaper,
You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
“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.
“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.
“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.
“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.
“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.
“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.
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.
Webpack 3 was released8 with support for scope hoisting. This is a huge step forward as it can reduce bundle sizes significantly. Another useful feature in this new version are magic comments for dynamic imports.
Samim shares insights into how assisted writing tools are using machine learning9 to understand and generate the human language. While the article focuses on how we can reimagine word processing software with machine learning and better algorithms, we can also learn a lot about improving our own writing style.
Eric Bidelman shares how we can use headless Chrome for automated testing13, in this case to run your Mocha and Chai tests via the Karma test runner. As a bonus, he also explains how this works on a CI-server.
React Express14 is an all-in-one guide to modern React application development. Perfect for people who want to get into React development and understand the differences between the various approaches.
Kristian Glass wrote an article about making decisions and owning them18 — something I constantly fail at in private life and could still improve in business life.
The ethical smartphone vendor Fairphone wants Apple to steal its idea19 of building devices that don’t rely on resources sourced with child-labor or under inhumane working conditions. So far, Fairphone has built two variants of smartphones, and as an owner of the Fairphone 1, I’m convinced that it’s possible to manufacture ethically better devices.
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.
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.
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:
It can be held at 45 degrees to the left, making a diamond shape:
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:
Talondra Keeton’s first practice sheet
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:
Dr. Holder advises to grip 1 to 1.5 inches away from the tip of the brush, pen or pencil.
Position the paper so that your arm rests perpendicular to the right side.
Practice big letters and your arm movement first, to help you loosen your grip on the tools.
Brush pens are flexible.
If you’re interested in pointed calligraphy, there are nib holders made for left-handers.
Repetition, repetition and patience.
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:
How far (more or less) from the point are they holding the brush pen, pencil or pointed pen?
How are they positioning the paper?
How are the arm and wrist positioned relative to the paper?
At what angle do they place the paper and the pen?
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!
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.
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.
About the freebie
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
Preview
As you can see on the preview below, the icon pack consists of topics that can come in handy for your next interface design:
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.
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.
4 How difficult can designing an accordion be? Well, one has to consider many things. A nice example is on Schoolfinder5.
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.
6 A classic example of an accordion on Nsb.no7, a Norwegian trip-planner, with an icon aligned to the right edge of the bar, and the entire bar acting as an expansion trigger.
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?
8 Zvv.ch9 combines two horizontal accordions with the same icon (circled plus) — one to indicate trip options, and one to indicate stops between two locations. Both of them serve the same purpose (expansion) and look similar. They clearly communicate the purpose of the icon and the behavior to be expected.
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.
10 Ableton.com11 uses a plus icon to indicate both a bundle deal (above) and expansion (if you scroll down the page). With icons having multiple meanings here, it might be a bit confusing, because some users might expect either expansion when clicking on the icon at the top (but nothing happens), or no interaction when clicking at the plus icon at the bottom (acts as expansion). (View large version12)
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.
1415 On Slack16, pricing plans appear as collapsed accordions on mobile, with the chevron pointing to the right, while the movement is happening from top to bottom.17 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. (Large preview18)
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.
1920 The plus icon might be loaded with different meanings. On Leica21, the plus prompts a lightbox in which the product is displayed. Some users might not expect that behavior. A loupe zoom icon might be less ambiguous here.
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.
22 What behavior should users expect when seeing an arrow in the navigation menu on tifwe.org23? It’s clear that an icon on the right of the navigation items indicates a submenu, and the design makes good use of available space. The category title is a link that jumps straight to category, while the arrow prompts expansion.
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.
24 Icons are often ambiguous. On Qso.com25, how can users know for sure if the click on a button at the bottom of the screen will expand the area as an accordion or scroll them down the page? In this case, the user is scrolled down the page. It might be a problem as a chevron often indicates expansion. (View large version26)
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.
27 Arrows on the Papillons De Nuit28. What are you expecting to happen when clicking on arrows at the top of the page, and on the right of the page? The arrow on the top acts as a hint (and does nothing on click), while the arrows on the right scroll the user to the sections of the page. Not every user might expect this behavior. (Large preview29)
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.
30 Sometimes a click on a text label leads to a separate category page and a click on an empty space does nothing. That’s why, when wishing expansion, some users will try to hit the icon rather than the category or the empty space. Research by Viget.com.31Large view.32
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.
34 The closer the tap happens to the icon, the more likely users will expect expansion. It doesn’t mean, though, that the closer the tap happens to category title, the more likely they expect to jump to the category. (View large version35)
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.
40 On Sony.com41, if one section is expanded and the user clicks on another section, the open section collapses automatically. This behavior isn’t consistent across websites, so users can’t rely on nor expect this behavior everywhere. Large view.42
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.)
434445 On The Guardian’s website, a chevron is placed on the left, followed by the category title and empty space. The entire bar triggers expansion, and the category’s home page is neatly displayed as the first option among accordion items.
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.
How do you indicate collapse and expanded states (beyond the icon)?
What happens if the user clicks on the category?
Should the accordion contain a link to the category’s main page?
What happens if the user clicks on empty space?
Should an expanded section collapse automatically when another section is selected?
What if there isn’t enough space to display all items?
Should you have a “collapse all/open all” link or button?
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:
A close-up of six of the icons in this set: Mostly red, white and blue colors, and all things American. Of course, you can never be too short of yummy donuts and bright garlands to celebrate the holiday.
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!
16
20
People get asked for their email on Twitter all the time. You can use Twitter’s advanced search to find the last time your contact responded to such a request:/about/emailhunter-56bb72d63df78c0b136f2aae.png)
/about/VoilaNorbert-56bb7a683df78c0b136ff805.png)
/about/anymail-56bb8b355f9b5829f8490b7a.png)
/about/rapportive-56bba3075f9b5829f84a8f70.png)
