Now Playing Tracks

Single-Field Credit Card Input Pattern | Brad Frost Web

Forms suck. And they especially suck on mobile devices.

Luke Wroblewski has been talking for a long while now about how input masksmake form entry a lot less painful for people. He recently highlighted Square Wallet‘s clever single-field credit card capture pattern.

The post referenced a phenomenal port of Square’s native app behavior for the Web by Zachary Forrest (@zdfs).

You can get my take on this pattern on Githubview a demo, or see it in action on our project’s prototype.

Confusing UI in iOS7 

The Dribbblisation of Design | Inside Intercom

❤ design / ux / ui = solving problems = achieving business objectives!

In the last year I’ve reviewed a lot of product design work from job applicants, at Facebook and now at Intercom, and I’ve noticed a worrying pattern. Too many designers are designing to impress their peers rather than address real business problems. This has long been a problem in creative advertising (where creative work is often more aligned with winning awards than with primary client business objectives) and its becoming more prominent in product and interaction design.

Much of the product design work from job applicants I’ve seen recently has been superficial, created with one eye towards Dribbble. Things that look great but don’t work well. Perfect pixel executions of flat design, but work that doesn’t address real business goals, solve real problems people have every day, or take a full business ecosystem into consideration.

In contrast, the best job applicants I’ve seen sent in their thought process. Sketches. Diagrams. Pros and cons. Real problems. Tradeoffs and solutions. Prototypes that illustrate interaction and animation. Things that move, change and animate. Things that use real data.


At Intercom, we’re working with Clay Christenson’s Jobs framework for product design. We frame every design problem in a Job, focusing on the triggering event or situation, the motivation and goal, and the intended outcome:

When _____ , I want to _____ , so I can _____ .

For example: When an important new customer signs up, I want to be notified, so I can start a conversation with them.

This gives us clarity. We can map this Job to the mission and prioritise it appropriately. It ensures that we are constantly thinking about all four layers of design. We can see what components in our system are part of this Job and the necessary relationships and interactions required to facilitate it. We can design from the top down, moving through outcome, system, interactions, before getting to visual design.

h/t Hacker News

Photoshop is not a design tool.

Photoshop is for graphic design not a UI tool. PSD’s help non techs to visualize a page. Been saying this for years! IMHO, in a RWD world, Photoshop becomes less relevant for mock ups. Start with pen and paper aka low-fi wireframes then create a front-end prototype.

Definitely, keeping an eye out for NoFlo UI. NoFlo is a visual flow-based development environment for JavaScript. Could NoFlo succeed where other visual programming tools haven’t?

Check it out on Kickstarter. They also have a GitHub project.

Bret Victor

“…these brilliant designers could not make real things. They could only suggest. They would draw mockups in Photoshop… the designers could not produce anything that they could ship as-is. Instead, they were dependent on engineers to translate their ideas into lines of text. Even at Apple, a designer aristocracy like no other, there was always a subtle undercurrent of helplessness, and the timidity and hesitation that comes from not being self-reliant. It’s fashionable to rationalize this helplessness with talk of “complementary skill-sets” and other such bullshit. But the truth is: An author can write a book. A musician can compose a song, a [sic] animator can compose a short, a painter can compose a painting. But most [UI designers] cannot realize their own creations, and this breaks my heart.”


It isn’t about design vs code, it is about design and code, together.

The Apple Standard: 6 Guiding Principles for a Better Web Experience

The iOS Human Interface Guidelines was written for developers, sharing the six guiding principles Apple uses to create outstanding products.

But they can work equally well to create a better web experience. If you work on websites, create apps, or design digital products, apply these rules to your own work… and you could inspire the same emotional attachment around your brand as Apple does around theirs.

  1. Aesthetic Integrity
  2. Consistency
  3. Direct Manipulation
  4. Feedback
  5. Metaphors
  6. User Control

UX is not UI

“UX is the intangible design of a strategy that brings us to a solution.”

UX has become a neologism. When something has “good UX” it is an implied meaning of having the core components of UX (research, maybe a persona, IA, interaction, interface, etc etc…). It’s not really necessary or desirable to tack the word design onto the end anymore. It’s a distraction and leads people down a parallel but misguided path… the path to thinking that UX = User Interface Design.

The interface is not the solution.

That’s the true heart of the battle between UX and those who only want UI – or don’t know the difference.

A Rare Peek At The Guidelines That Dictate Google’s Graphic Design

Here’s a couple of examples:

What Google was thinking when redesigning the new Google+

Not sure about how links are being treat:

The design of the new Google+ is muted and flat. The colors are actually quite neutral, allowing mostly the content to shine brighter. “Flatter design keeps the distraction away,” Gilbert said. This new philosophy is reflected in this new version of Google+, which is marked by simplicity and fewer distractions. For instance, unless you are ready to engage with a piece of content, the links appear as regular text, without the distraction of the blue link. Both the left and right sidebar and menus disappear, sliding in and out as needed.


Gilbert explained that when Google started working on the new look, the idea was to take a lot of information and show it in as simple a manner, giving the eye the visual cues to understand the importance of content. Bigger photos, for instance are indicative of their importance. Photos become bigger based on analysis of past relationships to the people and the content and their ensuing interactions, Gilbert explained.

Daring Fireball: Facebook Home and Dogfooding

There is a dogfooding lesson here, though. Does Mark Zuckerberg carry an HTC First, or any other Android phone with Facebook Home installed? Does Mike Matas? (Doesn’t look like it, judging by the “via Twitter for iPhone” metadata on his recent tweets.) Why not?

It’s always a sign of trouble when you’ve built something you don’t want to use yourself. Why does everyone I know who works at Apple carry an iPhone? Every single one? Not because they have to. It’s because theywant to.

Turn Facebook Home into an interface that Facebook designers and engineers want to use, not merely feel obligated to use, and then they’ll have something. But if it remains something that even Facebook’s own designers and engineers do not prefer over the iPhone (or stock Android, or any other platform), if it remains something that the company needs propaganda posters to promote even among its own employees, then Facebook Home will remain what it is now. A dud.

The Next Big UI Idea: Gadgets That Adapt To Your Skill

gamification of TV’s - will users have the patience?

As gadgets get more complicated, UI’s must be able to teach their users over time.

More and more interactive products are being returned. In 2002, 48% of all returned products were technically fully functional but were rejected for failing to satisfy user needs (28%) or purely due to users’ remorse (20%). Even though a product may have all the features one can hope for, complexity and bad user experience can prevent users from integrating it into their lives.


Just like the challenges in video games match the skills of the user, so should TV interactions. For reference, I’ve used four levels described in the Dreyfus model of skill acquisition.

Level 1: Novice

  • Rigid adherence to taught rules or plans
  • No exercise of “discretionary judgment”

Level 2: Advanced beginner

  • Limited “situational perception”
  • All aspects of work treated separately with equal importance

Level 3: Competent

  • “Coping with crowdedness” (multiple activities, accumulation of information)
  • Some perception of actions in relation to goals
  • Deliberate planning
  • Formulates routines

Level 4: Proficient

  • Holistic view of situation
  • Prioritizes importance of aspects
  • “Perceives deviations from the normal pattern”
  • Employs maxim for guidance, with meanings that adapt to the situation at hand

Jakob Nielsen's site has been redesigned

Hell has frozen over or April Fools ?

Comments from blauwbilgorgel:

  • Not all links have a title attribute
  • Large lists of links do not have a skip link.
  • Searchform is a javascript submit, with no fallback or warning (doesnt work without javascript support)
  • Mailto: adresses have subject preset.
  • Links are not underlined.
  • Popular topics links are black instead of blue, and the hovercolor doesn’t register for the colorblind.
  • Larger images often lack an alt-attribute.
  • Inline CSS hampers custom user stylesheets.
  • Submenu is somewhat confusing, visually disjointed from the main menu.
  • The contact form is a table without a table summary, and doesn’t work without javascript enabled, without a warning.
  • Missing a breadcrumb
  • Low contrast for blue links on white background.
  • Trouble finding the contact form. Submenu is initially hidden and you have to select “Contact information” from a list of links inside the “People” page.
  • After submitting form: <h1>&nbsp;</h1><h1><strong>Message Sent</strong></h1><p>&nbsp;</p>
  • Font-stack of Helvetica renders ugly on Windows machines
  • Form labels are not bold, above the form input, or of reasonable font-size.
  • Content pages don’t start with the content, but with a huge sidebar of links, not conform reading pattern.
  • Both HTML and CSS are not valid.
  • is somewhat paralizing with information/link overload.

I do like the design a lot, it being vanilla Foundation.

h/t Hacker News

Redesigning Google: how Larry Page engineered a beautiful revolution

Welcome to the Google Singularity!

Great insight into Google’s redesign via Project Kennedy from Googler’s.

The vision would turn out to focus on on refinement, white space, cleanliness, elasticity, usefulness, and most of all simplicity. “At Google we want to move fast, so a lot of these various products grew up on their own,” says Wiley, and so before Kennedy they didn’t abide by one design standard across the board. “We had a lot of simple and useful products,” Wiley says, “so we turned our focus towards making these products more beautiful, but also more consistent as a suite of products.”

Creating a design vision is the first step, but the product designers had to distill and implement it. “We sat down, locked ourselves in rooms, and we just refined on this design as quickly as we could,” Wiley said in 2011, “[we] created these reference set of designs and then set those onto the world through the ‘productionizing’ of that with the engineering teams.”

At the end of June 2011, just under three months after Page took over as CEO, Google shipped fresh new versions of Google Search, Google Maps, and Gmail, and Calendar. In the next year and a half, Google moved swiftly, launching Google Now, a fresh mobile take on Kennedy ideals, and a host of stunning new iOS apps like Google+, YouTube Capture, Chrome, and Maps that followed much of the original vision, albeit with some variations between the different product teams. What was once Brownian Motion, as Wiley describes it, was now a flowing stream of design ideals with forks along the way, but all heading in the same general direction.

Matias Duarte, senior director, Android user experience, put it this way: “Google is going through a design revolution, for lack of a better word.”

Google’s process is quintessentially Google and happened in a quintessentially Google way. Larry Page mandated that there be a new design focus to get the ball rolling, but instead of micromanaging at every step he let his employees to do the rest — guided by an empowered, core team of designers. They organized themselves in a typically Google structure: cross-discipline, informal, but driven to achieve a goal.

While the Eric Schmidt era was perhaps best known for “don’t be evil,” Page’s Google might soon be defined by “don’t be ugly.”

To Tumblr, Love Pixel Union