UI is what people see and touch. It is what comes to mind when thinking of a product or an experience. But the UI stands on the top of a huge UX mountain.

“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.

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.

❤ 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.

PRODUCT DESIGN IS ABOUT A MISSION, A VISION, AND AN ARCHITECTURE

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 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.”

winner!

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

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.

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.

Here’s a couple of examples:

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.

Goal

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.

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.

key points

Designing a Horizontal Swipe Layout

  • Organize your content in rows
  • Make your category headings stand out
  • Use partially visible content as a navigational cue
  • Avoid making multiple items on the page swipable
  • Consider a split view for less back button hitting

Users Preferred the “Carousel” Layout

Users Prefer Landscape Orientation

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.


LEARNING HOW TO USE COMPLEX PRODUCTS IS LIKE LEARNING A COMPUTER GAME

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

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.
  • http://www.nngroup.com/articles/ is somewhat paralizing with information/link overload.

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

h/t Hacker News