Group items tagged

Defining Skeuomorphism This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings. Or, as Wikipedia tells us [1]: A skeuomorph is a physical ornament or design on an object copied from a form of the object when made from another material or by other techniques.

the digital world has seen skeuomorphism popularized in the past couple years mainly thanks to the recent iOS-inspired trend of rich textures and life-like controls.

By opposition, the other side of the coin would be the newly popular "flat style", of which Microsoft's Metro UI is probably the main example. Flat Style embraces visual minimalism, eschewing textures and lighting effects for simple shapes and flat colors.

“If you’re designing a website and not thinking about the user experience on mobile and tablets, you’re going to disappoint a lot of users,” he warns. Designer Tom Muller thinks big brands getting on board will lead to agencies “increasingly using responsive design as a major selling point, persuading clients to future-proof digital marketing communications”. When doing so, Clearleft founder Andy Budd believes we’ll see an end to retrofitting RWD into existing products: “Instead, RWD will be a key element for a company’s mobile strategy, baked in from the start.” Because of this, Budd predicts standalone mobile-optimised sites and native apps will go into decline: “This will reduce the number of mobile apps that are website clones, and force companies to design unique mobile experiences targeted towards specific customers and behaviours.”

During 2012, the average site size crept over a megabyte, which designer/developer Mat Marquis describes as “pretty gross”, but he reckons there’s a trend towards “leaner, faster, more efficient websites” – and hopes it sticks. He adds: “Loosing a gigantic website onto the web isn’t much different from building a site that requires browser ‘X’: it’s putting the onus on users, for our own sakes.”

Designer and writer Stephanie Rieger reckons that although people now know “web design isn’t print,” they’ve “forgotten it’s actually software, and performance is therefore a critical UX factor”.

The first wave: Experience design

The modern design challenge is to define a great experience for a consumer comprised of a range of touch points, in various cases composed of interactions with several devices, retail experiences, personal contact points, software interfaces, physical mechanisms, data, and software intelligence.

We are systems designers now.

Many mouseover interactions are completely dysfunctional on a touch device

Instead of buying a state of the art monitor, buying a cheap monitor and several low-end devices to test your work on might be a better investment.

Hiding content and showing it on mouseover was considered to be a decent design pattern

Design thinking, however, is a slightly murky concept that means different things to different people. At heart, though, it is about fusing the creative and open-ended with the analytical and operational

For us, there are two broad skill sets--strategy and design--with no buffer in between to organize them and tell them how to work together.

a lot of organizations take a slightly patronizing view of design and creative types, assuming they can’t really be expected to understand and manage things like budgets. We assume the opposite--that everyone can and should be a good businessperson.

The parallax style has excited web developers and inspired any number of hype lists. It's also triggered a backlash among critics who feel its bells-and-whistles approach detracts from actual content. Pitchfork creative director Michael Renaud recently told the Atlantic Wire he expects people to "tire" of the trend within a year or two.

the parallax site was only superior in one sense--fun. None of the other survey measures indicated a significant difference in user experience between the two sites. Parallax didn't even edge the standard site in questions about visual appeal (although participants did think it looked slightly more "professional"). Frederick also discovered one critical disadvantage of parallax: test participants who suffered from motion sickness found the style disorienting.

Sobering as this first careful study of parallax might be to web designers, Frederick still believes it's a fad with a future. He cautions developers to think more carefully about the context in which parallax is applied. Text-heavy sites that employ parallax scrolling seem more likely to disorient users, he says. Sites that emphasize visual elements--images, infographics, or data visualizations, in particular--are probably a better fit for the style.

Glanceable design is really quite a simple idea. People are increasingly overwhelmed by the amount of information they need to process on a daily basis. So why not create simple “glanceable” interfaces that let them see their most important data at a glance, with little or no interaction required.

glanceable displays should “convey minimum and specific information in a way that is designed to exploit the ‘preattentive’ processing ability of the human brain.”

differences in screen size, device resolution or text rendering don’t matter in and of themselves, but only because they influence how someone will read our content.

Typography carries the literal message, and its legibility and readability impacts not just the audience’s understanding of the content but how easy it is for them to hear the brand’s personality.

Typography’s role in imparting the implied message is just as profound, and we can see its impact most clearly on mobile devices. Here, the design is often stripped back to its simplest form. Gone are the graphics, gradients and pixel-perfect details. It is the aesthetic personality of the type and the colour palette that influences our emotional response as readers and defines the experience.

According to IDC, mobile web browsing will soon eclipse desktop browsing in the U.S. and worldwide. This consumption of mobile content isn’t just happening on the go; 93% of people are now using their mobile devices to browse the Web from their homes, according to a study from Google.

The main development methodology behind responsive design is the use of media query functionality in CSS3. Media queries target not only certain device types (e.g., Android vs. iPhone), but actually inspect the physical characteristics of the device that renders the page. For example, the code below “asks” the device if its max horizontal resolution is equal to 480px: <link rel="stylesheet" type="text/css", media="screen and (max-device-width: 480px)", href="http://uxmag.com/iphone.css" /> If it is 480px, the device will load iphone.css. If not, the link is ignored. You can also include media queries in CSS as part of an @media rule:

a responsive design approach does not involve putting all of your content in front of the reader. Responsive design is about putting the right content in users’ hands according to the context of their interaction.

In a 2013 survey by Econsultancy, 55% of marketers globally are planning on increasing their digital marketing budgets this year, with 39% of them planning on reallocating existing budgets toward digital channels.

This is a permanent shift, not a passing trend. Products and services must deliver value while telling engaging stories through a multitude of digital devices and within a network of multiple brands, services, and platforms.

Marketing and product teams need to work more closely. Copywriting and story teams must collaborate with user experience teams.

Creating a layout is like doing a jigsaw puzzle; you have a bunch of pieces and you have to figure out how they should fit together.

designing native layouts for the web—whatever the device—we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.

When designing from the canvas in, the canvas dimensions are the constant on which the whole grid is anchored. Everything is sized and positioned relative to them. Designing from the content out means finding a constant in your content—be it the ideal measure of a paragraph or the dimensions of an ad unit—and building your grid out from there to fill the space available.

Often when innovation is the goal, there’s pressure to create an original product with an unusual name. But sometimes following a completely obvious path is an effective, albeit counterintuitive, way to achieve a design that is easy to use and ultimately popular. Take, for instance, Facebook’s design approach. On Facebook.com, which will likely soon have one billion global users, all of the company’s successful features -- “Photos,” the “Like” button -- have names that are less about clever and more about direct, descriptive utility. And doing the obvious is not just what Facebook does in the arena of naming and branding. The company has been working on bringing real-world human actions and interactions in an online social context. People share photos in real life. They tell their friends what they like. They share information. Facebook is simply creating software and interface design that replicate these aspects and then naming them in the clearest way possible, almost to the point of where they don’t seem named at all. The result is proven usability and immense popularity.

Understanding the unarticulated needs of a product user, anyone interacting with a service, or even a team that converges in a space to collaborate and solve problems, enables solutions that inspire, surprise, and surpass expectations.

One of the most common mistakes made when designing social applications is focusing immediately on rich, heavyweight interactions rather than lightweight ones. All the best social experiences online map closely to how offline social experiences work: offline, people build relationships slowly, one lightweight interaction at a time.

Every now and again we have more heavyweight interactions, such as family dinners, big nights out with friends, birthdays, anniversaries, family vacations and so on. But if we hadn’t built the relationship through many lightweight interactions over time, we’d have no interest in the heavyweight ones. The aggregation of many lightweight interactions is very powerful. It builds deep relationships, and helps people curate parts of their identity.

It is important that social experiences are emotional, and content that arouses emotion rather than reason is supported and encouraged throughout the experience. Resist the temptation to fill experiences with factual data about people, companies or brands, and focus on how people feel about these things.

I’m not saying that going down the responsive road is all peaches and cream, but the idea is that once the foundation is set, the ongoing maintenance costs decrease over time, while dedicated sites have several additional reoccurring costs.

Project planners are typically used to chunking things out into “streams”, and I’ve seen several project plans that launch a desktop version, then subsequently mobile and eventually tablet versions. That’s not really how responsive design works. The team need to address all channels up front as one “stream” influences the rest of the design. This is important even if you are making a dedicated mobile site that utilizes responsive techniques.

Some cultures are High Context. This means most communication is simply understood rather than explicitly stated. These cultures have a much higher tolerance for ambiguity and understatement. You could say that, in a High Context culture, the responsibility for understanding rests with the listener and it’s left to them to divine deeper meaning from the conversation or statements coming at them.

Low Context cultures, on the other hand, are much more explicit and often rely on directness and true feelings to communicate.

In these types of cultures, the responsibility for understanding is on the speaker to convey their ideas clearly and without ambiguity.

“The quality of shibumi evolves out of a process of complexity, though none of this complexity shows in the result.

Koko emphasizes restraint, exclusion, and omission. The goal is to present something that both appears spare and imparts a sense of focus and clarity.

Refrain from adding what is not absolutely necessary in the first place.

the usage of a single URL improves site analytics and SEO performance, and sites can easily be resized for new viewing formats.

These include longer time required to develop individual responsive pages, the need for code workarounds to account for older legacy browsers, the need for live device testing, non-compatibility with many existing e-commerce and CMS platforms, the need for a front-end rewrite, the need for a phased development approach in large enterprises, and the extra effort required to provide unique experiences for each form factor.