Transitional Interfaces
Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys. ...but there's little consideration about how it all fits together outside of a static comp. Oh, ok sweet. How? Folks keep throwing around the word “delight” when referring to animation and cute interactions. Animation leverages an overlooked dimension — time! Let's take a look at some simple ideas: Easing/cushioning In traditional animation, a breakdown determines how a mass moves from Point A to Point B.
Invisible animation
There’s no doubt that animating user interfaces is a rising trend. Risen enough that the emphasis is often put on the animation itself, rather than on improving the user experience through subtle and functional animation. Pasquale D’Silva gave some good advice in his talk at Web Direction South in 2013, including: Good animation is invisible.You shouldn’t notice that you’re looking at animation. It’s great advice that we — the team behind Campaign Monitor’s email builder — have been trying to apply with a few principles in mind: animation must improve the usability, feel natural and subtle, and give feedback to the user. Having spent the last year working on the email builder, I’ve learned that animation on the web — as opposed to native apps — comes with many challenges that go beyond finding the right timing, spacing, poses or easing. Add layout drop-down When users press the “Add layout” button, the layout drop-down fades in and comes from the button itself. Sidebar accordion
The anatomy of a credit card form — User Experience Design (UX)
Paying for something online with a credit card is simple, right? Yes and no. Yes, because we’ve been doing it since the early days of the Internet (e.g. Amazon), and no, because no two credit card forms are alike. Over the past 20 years, we’ve built a mental model of paying online: I pull out a credit card from my wallet, enter the card details into a web form, and click a submit button. Paying for something online is still 2–3x clunkier than paying in-person. Online, we’re getting closer. But before credit card forms become a thing of the past, we still have the present-day task of adding clarity, simplicity, and security to the credit card form. At Wave, our Invoice product enables business owners to create and send invoices to their customers, and to have those invoices paid via credit card. Our goal was to make sense of all the various inputs and questions a user may have, including: What payment cards are accepted? But, where do you place the logos on a web form? Nuts, right?
Responsive Design: Why and how we ditched the good old select element
How rethinking the way users make complex selections across devices completely changed our design. We’ve all seen this and know what it does: It’s the HTML select element. The invention of select dates back to 1995 with the introduction of the HTML 2.0 specification. Good things first By using the select element it’s a no-brainer to create a list of selectable options. So why not just use it? At Tradeshift we’ve been working a few months on some soon-to-be-released updates for our user interface. Presenting option lists to users is most easily done by using checkboxes, radio buttons and by using select. The number of selectable options we have is often counted in hundreds which makes the standard select element hard to navigate.Example: When specifying the unit type on an invoice line, the complete list contains hundreds of possible units. So what can we do now that the cookie cutter solution does not make the cut? The solution
Table Toolbar
Sort, filter and group can appear in all possible combinations and also as single actions. Make sure to use the proposed order if you use more than one of these actions. The dialog that opens when such an action is chosen is called view settings dialog. This dialog can provide any combination of these three settings, including only one setting (e.g. just sort). If sorting, filtering and/ or grouping is a common use case in your app, offer one, two or all of the corresponding features within one or several view settings dialogs. There are two ways for triggering the view settings dialog: Trigger the view settings dialog with a button on the table toolbar. Use one of these versions according to the following guidelines: In any case, only use the view settings you really need. Using the view settings dialog allows you do define several sort, filter, and/ or group settings per column. Support a consistent experience.
