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:

Here’s the curve on the new unibody MacBook Pro. While the perceived thickness I highlighted won’t be evident from looking directly at the side of the unit, it becomes clearer when you view the product from above, as seen in the next picture. It then becomes even stronger when the viewing angle increases towards a more typical one you will have when the notebook is on your desk:

Additionaly, some design elements are now thin and stripe shaped instead of circle shaped. Look at this IR receiver at the bottom of the MacBook Pro:

The new stripe shape further emphasizes the thinness of the product — i.e. we can’t fit a circle here so we had to make this a thin stripe.

Another interesting change is the way Apple makes their displays. Gone are the aluminum edges around the sides of the screen — it’s all one big black glass now, right to the very thin edge of the case that it sits in. How does this help? When the screen is off, the screen appears to be bigger than it actually is. This illusion is evident on most of Apple’s new hardware, from iMacs, Cinema Displays to MacBooks and iPhones. Sure, deceit might not be the main point of this design — the glass has to be attached this way and the black bezel helps bring out the colors on the screen — but it’s still a beneficial side effect.

What can we learn from this? I think this illusion element of design is something to think about when designing our products. Is there a way we can shape the design so that it emphasizes the key features we’re trying to promote — whether that be thinness of the case or the size of the screen, or whatever else.

Just like those illusions we’re all familiar with, where one line appears longer than the other when in reality they’re both the same length, the design of your product can have an effect on how that product is perceived, and can positively or negatively influence the appearance of its features.

Tyler builds websites and web apps for Vyre in London.

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.

Nested Rows

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.

There are times when it is beneficial to divide a column into multiple rows. Take the example below in which there are two 6-width columns side-by-side. In order to subdivide the left-hand column into two rows, we need to introduce nested rows.

First, we need to add a small chunk of CSS. The grid by default sets a width of 960 pixels on the .row class, which we need to overwrite here. You will also remember that the .column class has a left and right margin of 10 pixels (in order to accomplish a 20 pixel gutter). We want to keep this gutter for nested columns as well, but we need to compensate for the left margin of the first nested column and the right margin of the last nested column, thus the attribute margin: 0 -10px;.

.row .row {
	margin: 0 -10px;
	width: auto;
}

Once this bit of CSS is in place, the HTML is quite easy. It follows exactly the same pattern as normal rows and columns, only it is nested inside an existing column.

<div class="row">
	<div class="column grid_6">
		...some content here...
		<div class="row">
			<div class="column grid_3"> </div>
			<div class="column grid_3"> </div>
		</div>
	</div>
	<div class="column grid_6"> </div>
</div>

Check out the nested rows demo for a closer look or just download the code.

Flexible, not Fixed

Fluid grids do seem to get a lot of lovin’ from the pixel-haters out there. The good news is that accomplishing flexible layouts with this grid system is quite easy. The HTML is exactly the same as for the fixed grid. In the CSS, we simply take every pixel width specified, divide by 960, add a percentage sign on the end, and voilá.

The bad news is that a flexible-width grid is not compatible with the nested rows that we just discussed above. It’s one or the other. Sorry.

.grid_1 { width:6.25%; } /* 60 */
.grid_2 { width:14.583%; } /* 140 */
.grid_3 { width:22.917%; } /* 220 */
.grid_4 { width:31.25%; } /* 300 */
.grid_5 { width:41.667%; } /* 380 */
.grid_6 { width:47.917%; } /* 460 */
.grid_7 { width:56.25%; } /* 540 */
.grid_8 { width:64.583%; } /* 620 */
.grid_9 { width:72.917%; } /* 700 */
.grid_10 { width:81.25%; } /* 780 */
.grid_11 { width:89.583%; } /* 860 */
.grid_12 { width:97.917%; } /* 940 */

.column {
	margin: 0 1.04%;
	overflow: hidden;
	float: left;
}
.row {
	min-width: 960px;
	width: 97.875%;
	margin: 0 1.064%;
	overflow: hidden;
}

See the flexible grid in action or download your own copy.

Power to the People

Throughout these three posts we have considered only a 12 column grid. Of course every design challenge demands a unique solution, and a 12 column grid won’t work in every situation. Because of this, I’ve created a simple generator that allows you to specify a desired gutter width, column width, and number of columns, and then delivers a CSS file tailored to your needs.

Visit www.1kbgrid.com to generate the perfect grid for you!

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… Some bright folks also feel the same pain and went ahead and built meta-languages and compilers that take their own version of CSS and compile it to standard CSS code. Their own CSS meta-language is thus able to have new features, like variables, mixins, operations and so on. The most notable of these right now is SASS (part of HAML).

I’ve tried SASS and really liked it, but one thing really bothered me. I didn’t like how all the syntax was different to CSS. Sure, it’s not CSS anymore, it’s SASS, but do we really need to change the syntax of the stuff already present in CSS — why not just expand it?

I’ve asked a friend of mine who is much more competent at programming than me about how long it would take to code a CSS compiler that retained the original CSS syntax but added a bunch of new features. He liked the idea and so we’ve put together our own version of CSS together with a compiler we call LESS, which stands for Leaner CSS.

LESS Features

LESS augments CSS with 4 main features: variables, mixins, nested inheritance and operations.

Variables let you specify values in one place, like color or widths, and then re-use them throughout the document. So you could for example specify a palette at the top of the file and then re-use it around the stylesheet. Changing the value of the variable will affect all the other places you’ve used it in, making global changes quicker and easier.

Mixins are classes that can be embedded in other rules. The syntax is the same as a class (it actually is just a class, “mixin” is just the term used for the feature), and so by referencing that class name in another rule set you can “mix-in” all of the properties of that class to that rule set.

Nested inheritance is where instead of writing out each rule set separately you nest rules inside one another. This makes the structure of the stylesheet more organized and easier to understand.

Operations are just that — operations: division, multiplication, addition and subtraction. This helps you set up declarations which may be tied to sizes or colors of other declarations.

I’ve briefly outlined each feature above, but I suggest you check out the LESS site as it features code examples to make each of the above clearer. LESS looks just like CSS, and the syntax we picked for the extra features is very CSS-like. This means you can rename your existing ‘.css’ files to ‘.less’ and start using the new features.

How to get LESS?

To compile LESS files to CSS we’ve got a Ruby gem. You’ll need Ruby installed to use it. The gem will compile ‘.less’ files to ‘.css’. It also has a watch feature that will automatically run the compile when it detects changes in the LESS file. Check out the LESS site for instructions on installing and using the gem.

Is it ready for production use? Well.. let’s just say LESS is just fresh out of the oven and it’s probably worth waiting a little for it to cool down. All the features above work and it was of course used to build the LESS site, but because it’s an early version I’m sure there will be bugs that need fixing and stuff that will need changing — but it’s there for those who want it and can make use of it. It’s also open source so feel free to grab the source at Github and contribute. Would love to hear your feedback and suggestions, so go ahead and post your thoughts here and on Github.

UPDATE (28 Jun 2009): Tripeedo wrote a web based LESS compiler for those who don’t use Ruby. Here it is.

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.

Once you’ve picked a few colors for your palette, you can use extra controls to modify the whole palette at once, like making it warmer or moving it towards a certain hue. Other tools let you do things like get the main colors from an image, look at your color palette through reduced visions sets like red-green deficiencies and export and share your palettes. Additionally the site has plenty of information about color and color theory.

If you’re looking for a fresh new tool to help you generate color palettes, ColoRotate is worth checking out.

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 link colors are now a much darker shade of grey.

This is very clever because it means that when you’re not browsing the navigation menu, its contents have less contrast against the white background, making them less prominent on the page. The menu fades away making it easier to focus on the content of the actual page. Most people tend to mouse over navigation bars when they browse them. When you do that here, the links become darker, so the contrast between the text and the white background becomes higher. This makes each link easier to read.

So what this does is set the right level of contrast for each context that the UI element is used in. I really like it. What do you think? Do you see any pitfalls with this technique?

Tyler builds websites and web apps for Vyre in London.

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!

The solution

Fortunately, the tidy rows of our CSS grid can be used to reduce the number of page templates required.

First, lets add an ID to the body tag to indicate the current page. Most content management systems provide a mechanism for accomplishing this, and it’s a good practice even if you don’t use this grid.

body id="home"

body id="subpage"

Second, lets add an additional class to each row of our grid that describes the columns within. For example, we could add a class of row_6_6 to a row that contains two columns with a width of 6 units each.

<div class="row row_12">
	<div class="column grid_12"> </div>
</div>

<div class="row row_6_6">
	<div class="column grid_6"> </div>
	<div class="column grid_6"> </div>
</div>

<div class="row row_9_3">
	<div class="column grid_9"> </div>
	<div class="column grid_3"> </div>
</div>

Now for the important bit. Lets create a new CSS file named layout.css. Here we can tell the browser to display certain rows when the body ID is set to home, and other rows when the ID is set to subpage. We can accomplish this by hiding all the rows by default, then showing just the ones we need.

.row {
	display: none;
}

.row_12,
body#home .row_6_6,
body#subpage .row_9_3 {
	display: block;
}

Fresh out of the oven

We now have all the necessary ingredients to facilitate different layouts on different pages from a single template. See the homepage and sub-page in action, then download the demo.

By creating a single template that defines the layout for all the pages of your website, you can drastically reduce the number of templates in use. Fewer templates mean simpler development and quicker maintenance.

The disclaimer

I should leave you with a few words of caution. First, this font-end technique should only be used after all server-side options for consolidating templates have been fully explored. Second, hiding unused rows should only be done when little or no content is inside those rows. Hiding large amounts of content will raise a whole host of issues and is best avoided.

Tune in next time for…

In the third and final installment we will look at how to implement nested rows (that’s rows within other rows). Until then, adios.

UPDATE (20 Jun 2009): Read the last part of the 1KB grid series here.

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):

Then you press it and the whole page grows darker, similar to the dashboard effect on OS X, and you see a lit of messages and an input field:

I think this communication channel, unchained from individual websites and pages, would be really great. It would allow people to easily talk about the current news stories right on the news page as they’re reading them. It would allow people to discuss articles that have no comments sections. It would allow people to review products right on the product pages themselves or leave comments about the quality of an online store and whether they had any problems with it. Bad sites won’t be able to hide away by not providing any form of communication channel because it will be taken out of their hands.

One problem I see with this idea is malicious use. So for example, competitors might leave bad messages on websites of their rivals to try to damage their image. I think these things can be solved though and even today, people can (and do) the same things, so it won’t be anything new.

The biggest challenge to this is logistics though — this feature would provide the biggest value if all the browsers implement it, but the problem is, someone is going to have to act as the keeper and server of all the messages. Google is one of the few companies who could do it, and they could do it very well given what we’ve just seen from their latest product, Google Wave. So really, what we need are waves embedded on top of every page, and a way to access them through the browser interface.

Anyhow, just an idea I’ve had for a while, so posting it here to see what everyone else thinks. Is this a fruitless idea or am I onto something here?

Tyler builds websites and web apps for Vyre in London.

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

12 Columns, 960 pixels

The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between. While this is what I typically use in my designs, you could easily apply the same technique to other widths and other numbers of columns.

The CSS

Lets jump right in an have a look at the CSS. As you would expect, there is a class that corresponds to each of the possible column widths, units 1 through 12. We mentioned that each column is 60 pixels with a 20 pixel gutter between each column. Thus ‘.grid_2′ is calculated as 60 + 20 + 60 = 140 pixels.

In addition to the column widths, there are only two other classes defined: ‘column’ and ‘row’. The column class has a margin of 10 pixels applied to both the left and right edges, resulting in a cumulative 20 pixel gutter. Also note the ‘overflow: hidden’ attribute applied to both column and row. The real purpose of this technique is to clear floats, circumventing the need for a ‘clear: both’ declaration. Finally, we need to set the ‘display: inline’ property on ‘.column’ to prevent the double-margin bug in IE6.

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
  float: left;
  margin: 0 10px;
  overflow: hidden;
  display: inline;
}
.row {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

The HTML

The HTML is as minimal as the CSS. Each column contains a class indicating its width. Columns are then contained by a row, which serves to clear the floating columns (and is also instrumental in page templating, to be discussed in part 2). The only thing to remember is that the unit of columns inside a row must always add up to 12 (it is a 12 column grid, after all).

<div class="row">
  <div class="column grid_4"> </div>
  <div class="column grid_4"> </div>
  <div class="column grid_4"> </div>
</div>

<div class="row">
  <div class="column grid_8"> </div>
  <div class="column grid_4"> </div>
</div>

<div class="row">
  <div class="column grid_2"> </div>
  <div class="column grid_4"> </div>
  <div class="column grid_3"> </div>
  <div class="column grid_3"> </div>
</div>

Take it for a spin

That wasn’t so painful, now was it? Beats going to the dentist, at least. Take a look at what we’ve accomplished so far. Then, download the demo and get cracking!

Tune in for part 2 and discover how to use the grid to streamline your page templates for content management.

UPDATE (2009.06.06): Read part 2 here.

They are the founders of ActiveComm Labs, who specialize in user experience and human factors research.

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.

Active Listening – Overview and Concept

Active Listening consists of a set of communication techniques that were originally developed by psychotherapists as a way of getting their clients to feel safe and open up. This involved establishing rapport and trust by demonstrating care and a genuine desire to listen. Since its original development for psychotherapy, Active Listening has also been used for a wide variety of professions that rely on interpersonal communication. These professions include educators, law enforcement (particularly hostage negotiators), customer service, salespeople, and business professionals.

Active listening focuses on what a person is communicating to you. It includes techniques to ensure that you understand what you are being told, encourage further disclosure, and demonstrate that you are listening closely. When people communicate with one another, they not only communicate content but also emotions. It is the emotions behind the content that tell us the most about a person’s message. This can be extremely valuable in research by allowing the researcher to tap into the emotional component of a user’s experience with a product.

One way to grasp a better understanding of active listening is to understand the difference between active listening and passive listening. Passive listening is how most people learn to listen to one another and can result in missing a lot of content compared to Active Listening. It simply consists of sitting back and letting a person talk without taking any action at all. Think of it like listening to a keynote talk at a conference. It does not include interacting with the speaker or engaging in any way. It is a one-way form of communication. Anyone with experience speaking in front of a subdued crowd understands how uncomfortable it can be without any kind of engagement or feedback. This is how a research participant feels when you don’t engage him or her with Active Listening skills.

By contrast, Active Listening is, by definition, active. It includes engaging the speaker, asking questions, paraphrasing, emotional discovery and a variety of other actions taken by the listener in order to get more information from the speaker and build a relationship. As an active listener, your job is to engage in communication that will shape the behavior of the speaker to continue to disclose. An observer might describe it as a discussion in which two people are mutually interacting; however, when you are listening actively, the information will tend to flow in one direction, from the user to you. The information that flows to you will be the user experience. When appropriate, we’ll provide examples of an active listening exchange between a participant and a researcher to show how each technique should be used.

Active Listening – Specific Techniques

The specific techniques listed below are the communication actions that compose Active Listening. For each technique, the article will provide a description of the technique, why the technique is important, and how the technique can be most effectively used.

Eye Contact

Eye contact is looking the other person in the eye when he or she is speaking. It indicates that you are paying attention and listening to the person. The most effective way to use eye contact is to look at a person but do not stare. Occasionally make eye breaks, preferably looking down rather than away. Looking down gives the impression that you are thinking about what the person said. Looking away gives the impression that you are paying attention to something else.

Attentive Body Language

Attentive body language includes gestures and postures that indicate that you are interested in what you are hearing. This will make the person feel like you are listening to what they are saying and that you find them interesting. You can use Attentive body language by making gestures of understanding like nodding as well as postures that indicate interest such as slightly leaning forward or tilting your head.

Vocal Style

Vocal style is how a person uses speech rate, volume, and tone to indicate interest. Vocal style communicates to the other person your interest in what he or she is saying. Make the most of vocal style by making variations to speech rate, volume and tone to emphasize areas that are important or interesting in the conversation. An example would be speaking slower when asking about a topic that is very important.

Verbal Following

Verbal Following is responding to what the other person is talking about rather than abruptly changing the topic; it comes into play when you need to transition between topics for one reason or another. Verbal following shows that you are interested in what is being discussed even though you are changing the topic. In order to use verbal following always make a comment about what the other person was saying before you change the topic. This technique requires good judgment because some of the most valuable data can be gathered when you allow the participant to control the discussion.

Participant: It would be great if this device could sync with my PC also.

Researcher (Verbal Following): That’s a great idea. I’ll make sure to pass that on to the designers. Now if you saw this device in the stores, what would you expect the price to be?

Paraphrasing

Paraphrasing is when a person summarizes what the other person said. Paraphrasing demonstrates that you are listening, builds rapport and creates empathy by showing that you understand what the other person said. It can also ensure that information gathered is accurate. The most effective way to use paraphrasing is to listen to the other person and then summarize what the person said and ask them if what you heard was correct. Examples might be “Are you telling me…?”, or “So what you are saying is…?”

Participant: I’m not really sure, if it’s like it is now, probably about $50, but if it could sync with my PC, I’d be willing to pay $75, maybe a bit more.

Researcher (Paraphrasing): So the ability to sync with your PC will dramatically increase the value?

Reflecting

Reflecting is when a person repeats back the last word of a phrase. Reflecting demonstrates that you are listening and paying attention. It is a simple way of gathering more information without asking for it. The most effective way to use reflecting is to repeat back the last word of a phrase then let the person elaborate on it.

Participant: Actually, I was really confused by this button.

Researcher (Reflecting): This button?

Participant: Yeah, it took me a while to figure out that it was a button. I thought it was just a label.

Silence

Silence is when you strategically don’t say anything. Many people use silence when they are about to say something important or just said something important. Many people feel uncomfortable when there is silence in a conversation and if you wait, the other person may say something that he or she would otherwise not disclose. Just be careful not to overuse silence because it will make the person feel uncomfortable. Also make sure you wait to use it until after you’ve already established some rapport with the person.

Minimal Encouragers

Minimal encouragers are words or sounds that are used to express interest. Minimal encouragers are important because it encourages the person to continue speaking and shows that you are interested and paying attention. When minimal encouragers are used properly, the person will not feel interrupted while he or she is speaking. Use minimal encouragers by making responses like, “oh,” “yeah,” or “uh-huh” during the natural pauses in the person’s speech. These pauses tend to happen at the end of sentences.

Participant: I can totally see myself using this all the time, especially when I’m travelling.

Researcher (Minimal Encourager): Yeah?

Participant: Yeah, when you’re sitting in an airport for a while you have to keep yourself busy.

Researcher (Minimal Encourager): Uh huh

Participant: And the fact that you can switch between functions so quickly really makes me want to keep using it.

Emotional Discovery

Emotional discovery is an effective way to talk to a person about his or her emotional experience. Emotional discovery is important because it shows that you are listening, care and understand what he or she is feeling. Use emotional discovery to respond to the emotions heard in a person’s voice, rather than the content. Tell the person how he or she seems or sounds, rather than how he or she is feeling. An example might be a statement like “you seem to be uncomfortable,” rather than “I know you’re uncomfortable.”

Researcher (Emotional Discovery): You seem a little frustrated.

Participant: I just can’t figure out how to do this, honestly, if I was at home I would have given up already.

Empathy

Empathy is indicating that you understand or identify with the emotions of the other person. Empathy shows the person that you care and that you understand what they’re feeling. Empathy is one of the most effective tools for building rapport. The most effective way to use empathy is to make statements that indicate that you have experienced the emotion or statements that recognize the difficulty of the situation. Avoid making statements that show pity such as “I feel sorry for you”

Researcher (Empathy): We all know what it’s like trying to work with an interface that isn’t quite right.

Participant: I just feel like if you changed these couple things over here, then it would be almost perfect.

Open-Ended Questions

Open-ended questions are questions that cannot be answered with a “yes” or “no.” These kinds of questions encourage the person to elaborate on their answers. Open-ended questions are useful in gathering large amounts of information from the person with only a single question. It will also allow the person to express him or herself more completely and provide you with a greater understanding of the person. Use open-ended questions by asking questions that begin with “what,” “why,” or “could.” Examples may include “What did you do?” “Why did you do that?” or “Could you tell me more about that?”

Researcher (Open-Ended Question): How can you see yourself using this device?

Participant: Well, I’d definitely use it while I’m travelling, it’s great that it can keep me entertained and yet have so many other practical functions. I’d probably use it during my commute every day, although that would be a lot easier if it had some kind of docking station in my car. I’d probably even use it when I’m at home.

Close-Ended Questions

Close-ended questions are questions that can only be answered with a “yes” or a “no” response. Close-ended questions will generate concrete responses or force the person to acknowledge facts that they have avoided or unclearly addressed. Use close-ended questions to get a person to summarize or bottom-line and elaborate response, but be careful not to overuse them as they can make a person feel constrained and frustrated.

Researcher (Close-Ended Question): So you can see yourself using this regularly?

Participant: Yes.

Conclusion

After reading this article, you should have a pretty good understanding of Active Listening and how it works. As of right now, you know the techniques that compose Active Listening, but there is still another step to take in order to be able to use them effectively. Active Listening techniques should occur naturally, not as conscious actions that result from drawing from a knowledge base. You shouldn’t have to think about what you are going to say next.

This requires taking knowledge of these techniques and transforming them into skills. The way to do this is through proper and effective training. Much like the training that hostage negotiators undertake. I encourage anyone that that is interested in maximizing their communication effectiveness to seek out hands-on training supervised by a qualified instructor. Feel free to contact myself, Demetrius Madrigal, or Bryan McClain at ActiveComm Labs LLC for recommendations on training resources.

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.

The issue for Twitter is that the bio is meant to be one line, so instead of a text area they chose a text field. The natural thing to do is to change it’s width, which is easy enough with the CSS width property. The better solution in my opinion would be to use a text area, maybe only two or three lines in height. This will communicate that the content has to be brief. Also, if the user does add line breaks, you don’t have to display them in the output on the site — the users should expect this behavior since the field itself is called “one line bio”. Here’s what it would look like:

Making fields larger is usually a non issue since the space right of them is almost always blank, so developers should really spend that extra minute to set correct field sizes (or choose correct field types)  that would be fit for their intended purpose.