It’s flat, it’s beautiful — and it can teach us a lot about how a sloppy interface implementation can successfully confuse users.
Designers all over the world are ranting about the look and feel of iOS7 these days, there are full blogs dedicated to the sloppy user interface.
While I like the new look on my iPad, the user experience is not yet where it should be. I am not talking about colours and fonts, but about consequence and consistency. Whenever exposed to a new interface, the user will learn its elements and patterns when they first pop up. if this interface is not consistent, it will confuse users.
To show you what I mean, follow me through my first session in the built-in Clock app
❤ 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.
“…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.
Apply Apple’s guidelines for developers to to your website to create a web experience and inspire an emotional attachment to your brand. Here’s how.
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.
- Aesthetic Integrity
- Direct Manipulation
- 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.
In April 2011, Larry Page took the reins as Google’s CEO. He didn’t waste any time getting down to business. On his very first day on the job, Page launched an incredibly ambitious effort to redesign the company’s main products, including search, maps, and mail. He wanted them to be beautiful—Google had never been known for its visual polish—but he also wanted them to be cohesive, more like a true software suite than a jumble of disparate digital tools.
Here’s a couple of examples:
Inside scoop from Teehan+Lax. Evan Williams hired the best people. Wonder what the tab was!
Beware, the page is really heavy!!! Page load takes approx 15 seconds which is based on my download speed is 15 mbps
h/t Hacker News
Google’s reworking of its social network, Google+ shows that the company has started to marry data with design and craft new experiences. Will that be enough to turn you and I into active participants? Who, knows, I am just happy it doesn’t look like Facebook.
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.
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.
Designing a Horizontal Swipe Layout
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.
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.
- 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.
- 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> </h1><h1><strong>Message Sent</strong></h1><p> </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
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.”
User interface techniques continued to evolve in 2012, often blurring the lines between design, usability, and technology in positive ways to create an overall experience that has been both useful and pleasurable.
Infinite scrolling, for example, is a technological achievement that also helps the user by enabling a more seamless experience. Similarly, advances in Web typography have an aesthetic dimension but also represent a movement toward greater clarity of communication.