Using Deceptive Design Elements to Emphasize Product Features
Recently, I’ve noticed how Apple’s product designs have taken a direction towards deception — a gentle sort of deception that doesn’t trick you into thinking the product has something it doesn’t, but a deception that promotes and extends the appearance of certain features so that they appear better. I think it’s a smart way to design products (from a business perspective) as it will make your products seem better than they actually are, all done artificially through appearance rather than function. Here are a couple of examples.
Apple has modified the curves on their computers, from a smooth symmetrical curve to a more gently curved edge that gets cut off at the end, forming a sharp corner. What does this achieve? It makes the device appear thinner as the gentle curve tends to disappear and all you’re left with at the side is the thinner edge that now appears to represent the thickness of the device. This illusion works best when looking up from above rather than directly from the side, as the lower and upper curves disappear. Here’s the old symmetrical curve on the white MacBook:
The 1Kb CSS Grid, Part 3
In Part 1 we discussed the merits of a lightweight CSS grid. In Part 2 we talked about how the grid can streamline page templates in content management. Here, in the third and final installment, we will cover some of the more nuanced aspects of implementing the grid in real-life situations. Namely: nested rows and (hold the applause) a flexible grid.
Introducing LESS: a Better CSS
I don’t know about you but I’m not really satisfied with the level of control CSS gives me today. The feature set is just too restraining, and while I know how to use it to create anything I want, there is always plenty of code which I wish I didn’t need to duplicate, or I wish I could have written more elegantly.
It’s not so much the lack of fancy styling options like shadows and rounded corners, which are there in CSS3, it’s things like the lack of variables and ugly long inheritance selectors.
Can’t do much about that, right? Well, actually…
Reinventing the Color Picker
If you do any form of design work on the computer you’re probably familiar with the color picker. Whether in the form of a color wheel or a set of sliders, color pickers let you do just that — pick colors.
ColoRotate is an interesting new site that picks a novel approach to the traditional color picker design. Instead of 2D circles or sliders, ColoRotate features a 3D cone. At the core of the cone is the spectrum of colors. Intersecting that is the tint which lies on the z-axis. You can manipulate each one separately to help you arrive at your color. You can also blend two colors together.
Dynamic Contrast Management
Here’s an interesting design technique. I first saw it implemented with just CSS and HTML at the UX Digest blog. Earlier this week Apple have updated their website with a bunch of new product pages after the WWDC keynote and I saw them use this very technique as well, this time with JavaScript. The technique is dynamic contrast management. It’s easier to show than explain so let’s start with the pictures.
Here’s the top of the sidebar navigation on the new iPhone features page. This is what its standard state looks like when I’m not hovering over:
Notice how all the links apart from the currently active section are grey. Here’s what happens when you hover your mouse cursor over these navigation links:
The 1Kb CSS Grid, Part 2
In Part 1 we covered how to setup a lightweight CSS grid. I promised that this same grid could streamline the way page templates are used in content management. Well, here we go!
One is better than two
Every content management system is driven by templates. The beauty of the template is that an entire site can be updated by editing just a single file.
But imagine a website that has two distinct layouts: one layout for the homepage, a second layout for all the other pages of the site. In this situation you would typically require two separate template files. This means that in order to make a site-wide change, you would now have to update two template files instead of just one.
Now, two templates are manageable. But what about a site that requires many different layouts? I recently worked on project that had — no joke — 23 unique page templates, each page with slight differences from the others. Suddenly what should have been a 1 minute change took half an hour!
Web Browsers Need a Social Layer
Here’s an idea. Today, we’ve got a bunch of various means of communication we can use to share our thoughts on the websites we visit. These communication channels range from something like the comments area on blogs (just like the one at the bottom of this page) to message boards which many companies use for support or discussions regarding product features and live sometimes live chatrooms.
To be honest, there aren’t that many more channels, and most of the time websites don’t feature any of them at all. How many times have you browsed through an online store which had no discussion forums or no product review pages? Without any sort of customer feedback it’s very difficult to judge the quality and validity of what you’re about to purchase. Sometimes even blogs don’t have comment sections, and so to discuss the article you have to go elsewhere (for example, a lot of discussions these days take place on social news website threads rather than on the source articles themselves, even if they have comment sections)
I propose a different idea. How about a social layer on top of every site, implemented by the browser? Imagine if your browser had this social button that when pressed opened this new layer on top of the page you’re browsing that let you leave messages or even chat live with other people currently browsing the same page? Here’s what the button could look like (number of current messages displayed by the side of it):
The 1Kb CSS Grid, Part 1
CSS frameworks have become quite popular over the past couple of years. Some of them try to fit in everything: a grid system, a style reset, basic typography, form styles, you name it. Others focus solely on the grid, but still end up a bit bloated.
With added complexity comes… well, complexity: a steeper learning curve, increased development time, and — cringe — tougher debugging.
Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight. And, as I’ll show in part 2, it can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting).
How to Listen to the User and Hear the Experience
When someone is speaking, do you think about what the other person is saying, or do you think about what you are going to say next?
At ActiveComm Labs, we are big believers in communication and what it can do to improve research. Our background in communication includes many years of research and training with hostage negotiators across the country. Through this training we learned the skills and techniques that negotiators use to resolve crisis situations and how to apply them in a research setting. We consider Active Listening to be one of the key components of an overarching method that we call Active Observation®. Active Observation® is a synthesis of Active Listening skills, influencing techniques and advanced observation of non-verbal communication such as facial expressions and body language to generate a deep and dynamic understanding of an individual.
This article will include contents similar to the training curriculum performed by hostage negotiators. We’ll provide you with a very brief overview of Active Listening as well as discuss some of its numerous applications. We’ll detail each of the Active Listening techniques and how and when to use them. Finally, we’ll discuss the importance of training in order to make these advanced communication techniques work in the context of research.
Using Input Fields Fit For Purpose
I was just editing my settings in Twitter and have ran into a little gem, the one line bio input field. It’s a standard text field used for other things like usernames and emails, and that’s the problem. It’s the same length, too, which makes it very difficult to write out a 160 character line. Here’s a pic:
I can see 21 characters at a time yet the limit is 160, which over 7 times as long. This makes it difficult to see what you’ve typed and difficult to edit because you have to scroll back and forth.