Making beautiful forms; Square and Recurly. Making beautiful forms; Square and Recurly Posted by Dion Almaer about a year ago on ux I recently had some time to play with some apps (stuck somewhere with no place to go). I started to play with Square (and their card case app). I have always been impressed with their UX as it is simple (much use of white space a la Google), but in a way that is quite beautiful and not bland as Google can be.
One area that jumped out to me was on a very simple flow. Adding your credit card info. Most sites make you select a bunch of unnecessarily information and the forms are overly verbose. Initial Ask You are simply asked for your credit card number: There is a mini picture of a credit card to the left of the number text field As soon as you type a number the credit card “face” changes to become a VISA or MASTERCARD (or whatever) showing you instantly that they are grokking what you are typing in. Now you are asked for the secondary info The feedback throughout the experience is fantastic. Displaying Icons with Fonts and Data- Attributes. Traditionally, bitmap formats such as PNG have been the standard way of delivering iconography on websites.
They’re quick and easy, and it also ensures they’re as pixel crisp as possible. Bitmaps have two drawbacks, however: multiple HTTP requests, affecting the page’s loading performance; and a lack of scalability, noticeable when the page is zoomed or viewed on a screen with a high pixel density, such as the iPhone 4 and 4S. The requests problem is normally solved by using CSS sprites, combining the icon set into one (physically) large image file and showing the relevant portion via background-position.
While this works well, it can get a bit fiddly to specify all the positions. In particular, scalability is still an issue. A vector-based format such as SVG sounds ideal to solve this, but browser support is still patchy. The rise and adoption of web fonts have given us another alternative. That’s not all though: As with all formats though, it’s not without its disadvantages: The Messy Art Of UX Sketching - Smashing UX Design. Advertisement I hear a lot of people talking about the importance of sketching when designing or problem-solving, yet it seems that very few people actually sketch.
As a UX professional, I sketch every day. I often take over entire walls in our office and cover them with sketches, mapping out everything from context scenarios to wireframes to presentations. My desk. Although starting a prototype on a computer is sometimes easier, it’s not the best way to visually problem-solve. When you need to ideate website layouts or mobile applications or to storyboard workflows and context scenarios, sketching is much more efficient. It keeps you from getting caught up in the technology, and instead focuses you on the best possible solution, freeing you to take risks that you might not otherwise take.
Many articles discuss the power of sketching and why you should do it, but they don’t go into the how or the methods involved. Sketching ≠ Drawing OK, let’s get started. Work In Layers Technique Why? Caution. Web Application Form Design. "Input elements should be organized in logical groups so that your brain can process the form layout in chunks of related fields. " –HTML: the Definitive Guide Quite rare is the Web application that doesn’t make extensive use of forms for data input and configuration. But not all Web applications use forms consistently. Variations in the alignment of input fields, their respective labels, calls to action, and their surrounding visual elements can support or impair different aspects of user behavior. Form Layouts When the time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for instance, entering a name, address, and payment information in a check-out flow), a vertical alignment of labels and input fields is likely to work best.
In this layout, it’s advisable to use bold fonts for input field labels. An alternative layout, right aligns the input field labels so the association between input field and label is clear. Using Visual Elements. Quince / Home.