Six Apart is shutting down its Vox blogging service. Users have until Sept. 30 to export their data to other services, including Six Apart’s TypePad blogging service. After that, Vox will be gone.

If you’ve got a Vox blog, there are several export options — Six Apart has instructions for moving to TypePad, Posterous and WordPress. There’s also an option to move your photos and videos over to Flickr.

Of course none of those services quite combine the privacy and small social network features that endeared Vox to users, but at least you can retrieve your content in some form.

The export options also make no mention of the fact that Vox is an OpenID provider, which means that, presumably, when your Vox URL is gone, your OpenID is gone with it. That means any site you’ve signed into using your Vox account will no longer let you sign in. In some cases that could mean a total loss of access to the third-party site — exactly the sort of thing OpenID is supposed to help prevent.

If there’s a moral to Vox shutting down, it’s pretty simple: choose your OpenID provider with care. It would seem that the bigger the provider, the safer you are. Alternately you could be your own OpenID provider, ensuring that you retain control over your identity.

Six Apart’s blog does not give any reason for the shutdown, and the company did not respond to requests to comment on this story. However, it seems likely that Vox was simply supplanted by Facebook, Twitter and other, more popular means of sharing content with your web friends.

The social network landscape has also changed considerably since Vox launched in 2006. Much of the initial appeal of Vox — namely, its tightly controlled privacy — is less of a concern for many of today’s users.

See Also:

• New ‘OpenID Connect’ Proposal Could Solve Many of the Social Web’s Woes
• To See How OpenID Can Work Well, Look at Stack Overflow
• Be Your Own Open ID Provider

close article | permalink

A few of this week’s 37signals staff posts at Twitter.

jasonfried: The reason you can’t get it done in one day/week/month is because you’re making it take two days/weeks/months.

rjs: For fans of Christopher Alexander’s recent books, Nikos Salingaros’ “A Theory of Architecture” is a must read http://amzn.to/cGOdBg

longstride: Calling in GMail is pretty cool. Add it as one your Google Voice lines and you get inbound calls, too.

mattlinderman: Sparklines:Graphic designers = Windmills:Don Quixote

dhh: The Ruby future goes through 1.9.2 and you come along. It’s never been easier to work with multiple versions w/ RVM: http://bit.ly/15h0ax

sstephenson: I wish more Mac utilities used prefpanes instead of menu bar icons.

close article | permalink

A web site or web app should not be the result of a production line of people.

A web site or app should be the product of a Web Designer and a Web Developer (who occasionally are the same person, as demonstrated by Shaun Inman). Anyone else who is added into this equation is a waste of money and time.

I’ve worked in the web industry for 10 years at three different web design agencies and now run my own company who produces websites and apps.

Wikipedia defines User Experience Design as

A subset of the field of experience design that pertains to the creation of the architecture and interaction models that impact user experience of a device or system.

I define it as

Advanced knowledge of …

1. HTML (including HTML5)
2. CSS (including CSS3)
3. Responsive Design principles
4. Accessibility
5. Usability
6. User testing

A basic knowledge of …

1. Copy writing
2. JavaScript
3. Marketing
4. A/B and multivariate testing

You cannot be a ‘UX Professional’ if you are not an experienced Web Designer and involved in the day-to-day process of designing, building, testing, marketing and updating a web project.

close article | permalink

MakeUseOf is a daily blog that talks about websites, computer tips, and downloads meant to make you more productive. Very useful to tell you about websites you have never heard of, free alternatives to software and how to tips for Windows, Mac and Linux. Definitely worth checking out and subscribing to, www.makeuseof.com. Thanks for the shirt guys!

If you would like to see your website or company featured on Free Shirt Friday click here

Get a sneak peak at the all new ShoeMoney System

Interested in advertising on Facebook? Check out my latest post on Facebook Advertising

close article | permalink

The business of building websites is one of constant change, adaptation and strategy. The way designers and developers build websites is often informed by the methods of others and their own trial and error. In light of this, we can draw a number of parallels — some philosophical, to a certain extent — between Web professionals and one of the oldest and most popular board games of all time (counting traditional and digital games). This game is chess.

Image credit

In this article, we’ll explore the relationship between the game of chess and the Web industry. We’ll learn fundamental lessons from the pawn, rook, knight, bishop, queen and king, and we’ll highlight the factors — both offline and online — that determine best practices. The game is beloved by many professionals, so it seems fitting to apply its great strategy and elegance to the digital age; certain practices might help you lead a more successful working life.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Pawns

Of all the pieces on a chessboard, the most abundant and least strategically useful are the pawns. Acting as soldiers on the front line, these men of honor advance across the board in an attempt to reach the end of the opponent’s side and transform into a more useful piece (i.e. another queen). While this doesn’t happen often, pawns nevertheless play a fundamental role in shielding higher-ranking pieces from attack, and these simple pieces are also used at the outset to gain positions of advantage.

Always Move Forward

Pawns can only move forward. They can get a quick start; players have the option of moving the pawns up to two spaces on their first move and subsequently moving them one space at a time. When you work on projects in a business environment, the principle of moving forward without back-tracking is an inspirational perspective. If you cease to constantly drive your ideas forward, they can become stagnant; progress is critical to a website’s development.

Here are some tips you can use to adopt this mindset:

• Don’t get stuck using deprecated practices when structuring website code.
• Examine your community to determine needed features for future upgrades.
• Change a website’s interface only if it would benefit the user experience.

Be Willing to Sacrifice

The ideal of giving something up in exchange for a greater good is realized by pawns, which, though limited in function, are plentiful and can protect others. In design, shielding the end user from issues that can damage the usability of the website is a worthwhile sacrifice. Having to let go of something that took time and energy is always unfortunate, but knowing when to say goodbye could mean the difference between success and failure.

Here are some tips for internalizing this attitude:

• Ensure that your Web layouts are flexible enough to meet the needs of various devices.
• Weigh the benefits of features against their pitfalls before eliminating them.
• Content is more valuable than design; never dilute its quality for eye candy.

Aim for Change

The pawn’s greatest moment is arriving at the opponent’s side of the board. Striving for betterment and aiming for your goals are behavioral ideals firmly upheld by professionals. This requires dedication and careful planning. When undertaking a creative project, it’s important to think beyond the current ask and consider the long-term project.

Here are some tips to get into this mode:

• The website-building process is never complete; ensure that you maintain a steady flow of updates.
• Think of ways to enhance the website to better cater to your visitors’ changing needs.
• It never hurts to have a business plan when scoping out a Web-based project.

Rooks

Rooks (or castles, as some people call them) are fortresses of strength that move across the board either horizontally or vertically. Their nature is similar to that of bishops in that they move in a straight line (although bishops move diagonally). Progress can be hindered by barriers, and interaction with other pieces is sometimes required, but the rook’s overall benefit is stamina and longevity.

When working on Web projects, we often put a great deal of thought into things like conventions and patterns and their theory and implementation. The nature of semantics and following recognized pathways in order to structure a document properly is reminiscent of the way that chess pieces such as the rook have a particular function and invariably carry out unique tasks. Only with logical thought can we hope to change the ultimate goals of an event and avoid obstruction.

Structure With Purpose

A rook represents strength and structure. The castle of stone might be restricted in its interactions on the chessboard, but its value is in its character. Websites need to be constructed well in order to survive the trials of everyday use. Considering how such needs should be met will ensure a sturdy and durable display of data. Take great care when structuring your work to reduce “illegal moves” and syntax.

Here are some tips for strengthening your outlook and code:

• Always validate your code; it will reduce the number of bugs.
• Use the right element for the job to improve your code’s semantic value.
• Keep code minimal to reduce file size and loading time.

Assist Those in Need

Like the other pieces on a chessboard, the rook is always on hand to help out by attacking or defending. Working with others to accomplish a task is only part of their job. In a Web environment, the same is true: if you take the time to assist those who use your website or service, not only will you increase your value, but you will gain the gratitude of the visitors, whom your website requires in order to keep running.

Here are some tips that might be of assistance:

• Providing ways for people to contact you is important to maintaining trust.
• Negative feedback can still be constructive; don’t dismiss it as “bashing.â€�
• Provide social interaction aids to help visitors feel involved in your community.

Take Precautions

Sometimes things don’t go as planned, in which case you’ll want to hold the strongest position possible. Rooks, like all other critical pieces, are only tools to protect other pieces in play, but caution is fundamental to remaining in a position of power. Thinking of how future scenarios might challenge your strategy can help future-proof your work from obvious flaws. You don’t want visitors to encounter obstacles that make them miss out on the benefits of your website!

Below are some tips for fortifying your website:

• Turn off scripts and styles to test whether your website is still usable.
• Test your websites on mobile devices, a market that is proliferating.

Knights

Knights are unique in their movement, going forward two spaces and then taking a single side-step. This means they can weave past other pieces and take up positions of singular advantage. Strategically, knights are most often used to pin hard-to-reach pieces in place through a clever attack. While this unique movement has its advantages, the knight does not replace the other pieces, which have their own strategic benefits.

Our uniqueness, whether as it is applies to our creative process, our products or our ability to solve common problems, is something we as professionals take for granted. We are able to incorporate creative flourishes when we forge applications, flourishes that can be tracked through the code (such as conditional comments, which give stylistic flavor to Internet Explorer). Like a white knight saving our sanity, our uniqueness helps us side-step issues that could otherwise become complicated.

Be Brave in Adversity

Mythology has taught us the familiar attributes of the knight: bravery, strength and honor. Thoughtful reflection on the Web-building process teaches us to be courteous to others and brave, while sticking to our guns when faced with the prospect of compromising in order to gain market share.

Here are some tips to make yourself more knight-like:

• Never take criticism personally; negative feedback is often the most useful kind.
• Don’t resign in the face of competition; the only failure in life is to quit trying.
• Try to rally support for your project; there’s strength in numbers.

Have a Selling Point

The knight is the only chess piece that move in two directions in one turn; even the queen can’t do this! This attribute teaches us the value of having a selling point. Selling points give visitors a reason to choose one product or service over others that perform the same function.

Here are some tips on finding your selling point:

• Draw from other people’s work, but never steal anything outright.
• Improving on existing services is a kind of innovation in its own right.
• Be focused in what you offer; reinventing too much increases complexity.

Avoid Barriers to Access

The knight is the only piece that can pass over others in its movement. This ability to navigate past barriers is somewhat reminiscent of standard recommendations for accessibility, which ask us to remove barriers to access on our websites. The goal is to allow freedom of movement and access to content.

Below are some tips on removing barriers:

• Consider the types of people who are not as able as you are online.
• Testing your work on an audience is better than going solo.
• Make sure your website works in different browsers to avoid serious breakages.

Bishops

The bishop is a piece that moves diagonally across the chessboard. The bishop scans the board for its next move, minding pieces that block its path, in the same way that a visitor scans content until a barrier prevent their progress. A bishop cannot step off the tile color to which it was initially assigned, ensuring a kind of vendor lock-in.

As Web professionals, we tend to get caught up in arguments about whether frameworks are useful, given their disadvantages (and even with graceful degradation, for example). The benefits of frameworks for certain situations occasionally outweigh their downsides (like trapping users in the environment), so make the most of what you have; dismissing less powerful options is not always the best way to go — in fact it could increase the amount of work required.

Have Faith in Your Work

The bishop, of course, is religious in nature, an agent in the battle between two sides. Faith in a religious sense is not needed to practice Web design, but as a quality of character it does play a part in one’s identity. Faith affects motivation and makes you believe in the project you’re spending so much time and effort on. If you have no faith in your craft, the job is doomed from the outset.

Here are some tips for building faith in your work:

• Create a list of benefits to focus on your website’s potential.
• Set realistic, structured goals to achieve success.
• Encourage visitors to recommend your work to people they know.

Know Your Limits

It may seem frustrating that each bishop is trapped on its own color, limited in impact. But if you make the most of it, bishops can still be useful. Know your own strengths and limitations, so that you don’t attempt the impossible or unachievable — if you do, the result will surely be flawed.

Here are some tips on knowing your limits:

• Get external support or advice when you hit a wall.
• If something can’t be achieved the way you hoped, look for alternatives.
• Reduce your weaknesses by learning new skills regularly.

Stick to Your Guns

While being able only to move diagonally may seem like a disadvantage, this can prove useful on occasion. Having sheer determination to carry out a job in a certain way is admirable. We humans are sometimes stubborn, and we stick to our guns when possible. This can cause us to make mistakes… or motivate us to persevere.

Here are some tips on being determined:

• Reflect on a project’s overall goals whenever possible in order to reassess a plan’s feasibility.
• Mistakes happen, and no one is perfect, but that’s no reason to stop trying.

The Queen

The queen is the second-most important piece on the chessboard. She can move horizontally, vertically and diagonally across any distance, and her power spans the entire board. She is the king’s most agile bodyguard, and losing her can be devastating. You have to use your power responsibly, both on the chessboard and in your profession; misusing your tools could cause you to lose visitors to the competition.

Sometimes we find ourselves swatting a fly off a nuclear warhead. Knowing exactly what to use, when to use it and how to use it appropriately is what ultimately distinguishes professionals from amateurs. In addition, taking advantage of the powerful tools at our disposal can speed up progress and eliminate the complexities that come with attempting the impossible with simple tools.

Realize Your Potential

A potent force, the queen moves freely about the chessboard, with few restrictions. The queen is a powerful piece and reminds us to exert the greatest effort to reach our potential. Rather than staying in our comfort zone, we must always learn new skills and achieve more than what is expected of us.

Here are some tips to stretch your skills:

• Everyone has the capacity to learn; keep your skill set up to date.
• Push yourself to become a better professional and to exceed your own expectations.
• Try not to let any of your skills go to waste when creating something.

Cover All Bases

In our work, we try to minimize error by viewing every situation from multiple angles — this is important. In chess, players use the queen in much the same way, exploiting her power yet shielding her from harm. In the creative process, your only real limitation is being blind to critical elements, which is why getting some perspective from outside testers and users never hurts.

Here are some tips to cover your bases:

• The more time you spend planning a project, the better the results usually will be.
• Information architecture is your friend; make use of wireframes and mock-ups.
• Spend time testing your website intensively for critical flaws.

Strategy and Learning

You have two knights, two rooks, two bishops and many pawns, but only one queen. Her value lies in her singularity; each move of the queen requires strategy and consideration of consequences. We become better players — and professionals — through trial and error, constant learning and foresight. Being cautious in the game teaches us to be wise in business.

Here are some tips to help you strategize:

• Read blogs, books, tutorials, magazines and anything else that can help guide you.
• Analyze your target audience to get ideas on what your website might need in future.
• Researching the competition gives you a sense of what potential visitors need.

The King

No piece is as important as the king; it is the one piece that must evade capture. The king moves only one space at a time, in any direction, and whenever it is in immediate danger, either a piece must be moved to block the attack or the king must be moved to avoid it. The king has no equal and cannot be restored by a pawn — sacrifice, and so prevention is imperative.

Web professionals have to protect what is important, too. We deal with payment details, databases, passwords and other sensitive information. If we lose any of that through carelessness or a lack of preventative measures, we end up losing something greater: the customer. Establishing trust takes time, but it can be lost as quickly as a surprise checkmate!

Avoid Traps

Protecting the king is the primary concern of every chess player. Gaining advantage to prevent loss is important. While Web professionals usually have no reason to evade capture (unless they’re doing something wrong), the benefit of avoiding common traps (the equivalent of “foolsmate” in chess) becomes apparent when testing the cross-browser functionality of a website.

Here are some tips on avoiding traps:

• Try to reduce the intrusiveness and obtrusiveness of your website to enhance the visitor’s experience.
• Actively seek out errors in your work to improve your service.
• Internet Explorer is a pain. Watch out for its rendering faults.

Value and Importance

A common tactic in chess is to weigh the value of the pieces against the benefits they represent. The king is critical because the game is lost without it. Comparing value has an important role in the Web industry, too, especially when losing mission-critical features would undermine the entire process. Comparing value also helps when prioritizing maintenance work or scheduling upgrades.

Here are some ways to tip the scale:

• Accurately pinpoint the value of your service.
• Upgrades are avoidable, but reduce downtime as much as possible.
• Price your service fairly; prices that are either too high or too low create problems.

Know When to Resign

Sometimes we get so excited — or stressed, as the case may be — about complex or next-to-impossible projects that we forget the option of saying “no.� We never like to resign or throw down our sword; we feel as though we have failed because we couldn’t meet the client’s needs. But firing bad clients and knowing when to scrap weak ideas is a part of being a professional. You can’t win every fight.

Here are some tips on recognizing when to throw in the towel:

• Trust your instincts when deciding whether to undertake a project.
• Salvage something from anything you work on.
• Learn how to deal with “clients from hell.â€�

Chessboard

Chess players focus on the pieces in play and on capturing the king, but they must also understand the chessboard as a battleground on which this drama plays out. This relates to the website-creation process (and to a lesser extent, the Web industry): lessons are to be learned from the chessboard itself.

Image credit

Light and Dark

Like a chessboard, the Web industry is full of light and dark, good and bad. We weigh benefits and pitfalls when performing our roles. A chess game tells a story; likewise, the fruits of our labor and our highlights and disappointments all appear online.

Think Ahead

One of chess’ biggest lessons is to think ahead, instead of in the moment. Being able to predict how your opponent will move helps you gain advantage. This is also true of the website-building process. Unjustified decision-making leads to problems, whereas well-planned strategies that entice people to visit and use your service lead to faster results and greater rewards.

Weigh Your Options

In chess, there are literally millions of ways a game can play out, and with every move the number of potential outcomes decreases. Knowing your options and which route affords the best opportunity for success is a critical skill. Website creators have many different methods of production and implementation as well, but missing the mark with scalability or usability can diminish a website’s user-friendliness and jeopardize its success.

Make Your Move

Decision-making can be tricky; in chess, a wrong move can cause you to lose a piece, a good position, an advantage or even the game. The same could be said of building a website. Preparing for different projects, services and eventualities is one thing, but having the courage, skill and understanding to carry them out successfully takes practice. After examining your options, make your move: put all your careful planning into action.

Checkmate!

So many useful lessons can be learned from chess. If you haven’t played it before, visualizing what we’ve gone over might be hard, but the fundamental principles of the game — how the pieces interact and the role of strategy in the big picture — should not be ignored. The game actively promotes logical thinking and strategy — both useful skills.

More lessons could certainly be drawn from the game, but hopefully this article will serve as a source of inspiration, especially if you feel your goals are out of reach. We often learn the most from making mistakes, losing a battle and then returning to win the war. Nowhere is this been truer than in chess, where a mixture of practice, skill and occasional luck is required to become the grandmaster.

So many aspects of the Web industry (such as syntax, design and ideals) change constantly, but the fundamental principles of learning, growing and trying your best often mean the difference between failure and success. Try to incorporate lessons from the chessboard into your own work; while having all the pieces doesn’t guarantee victory, having the basic skills will give you the confidence and awareness that you need to succeed.

(al)

© Alexander Dawson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

close article | permalink

Time: 19:38 | 09/02/2010 | Download MP3

Summary
Three members of the 37signals programming team — Jeffrey Hardy, Jamis Buck, and Jeremy Kemper — answer questions from readers of Signal vs. Noise. Topics include Rails, Git, Mocha, Vim, nginx, Passenger, and more.

More episodes
Subscribe to the podcast via iTunes or RSS. Related links and previous episodes available at 37signals.com/podcast.

close article | permalink

Google is celebrating the second birthday of its Chrome web browser with the release of a new, improved version.

Chrome 6 arrives with an updated user interface, better syncing tools that include support for web form data and extensions, and — as should be expected with every new browser release these days — increased speed and numerous bug fixes.

If you don’t want to wait for Chrome to automatically update, head over to the download page and grab Chrome 6 for Windows, Mac and Linux.

Google’s browser is in an enviable position right now. It recently passed Safari in user share — new data from August shows the lead it snagged in June is stretching — and it’s gaining on Firefox and IE. Also, in a market where raw speed is the most important metric, Chrome is enjoying a solid reputation as the one of the fastest — if not the fastest — browser on the scene.

Chrome has also had considerable impact on how other browsers in the market look and behave since it arrived in September, 2008. It kickstarted a shift toward minimal interfaces that Firefox and Internet Explorer are mimicking. Chrome also started the trend of tightly sandboxing web browsers to improve stability and security.

If you’ve been using early builds of Chrome 6, there isn’t much here that’s new, but if you’re upgrading from the older, stable release of Chrome 5 there are quite a few changes.

Perhaps the most noticeable thing about Chrome 6 is what’s missing — almost all the toolbar buttons. Chrome has consolidated nearly everything into a new menu button to the right of the URL bar. Click it and you’ll find the browser’s most-used menu functions.

Other nice touches include a new green padlock icon in the URL bar to indicate you’re on a secure HTTPS connection, and a less-cluttered new tab page that serves as your starting point for new browsing windows.

Chrome 6 isn’t just a visual update — new features like form auto-fill make for faster checkouts at e-commerce sites and faster sign-ups on new services. Chrome can now also sync both your autofill form data and any installed extensions across all your computers.

Chrome may be celebrating its second birthday, but it isn’t resting on its laurels. The Chrome dev channel already contains an embryonic version of Chrome 7 with hardware acceleration and the new “Tabpose” feature for quickly switching between your open tabs.

Browser data from NetMarketShare, chart from Google. Browsers with less than 2 percent share have been omitted.

See Also:

• Leaked Screenshot Shows a Cleaner, Simpler IE9
• Google Chrome 6 Beta Is Right Around the Corner
• Chrome 6 Beta Boasts New Look, Better Sync
• Chrome 7 Shows Off Hardware Acceleration, ‘Tabpose’

close article | permalink

In the last few years, more and more organizations have come to view UX design as a key contributor to successful products, connecting teams with end-users and guiding product innovation within the organization. Though it’s fantastic to see this transition happen, there are growing pains associated with becoming a user-driven organization. These are the pitfalls that I see organizations grappling with most often.

Pitfall 1: It’s easier to evaluate a completed, pixel-perfect product so new products don’t get vetted or tested until they’re nearly out the door.

Months into a development cycle and just days before the release date, you realize that the UI has serious flaws or missing logic. If you’re lucky, there is enough flexibility in the schedule to allow grumbling engineers to re-architect the product. More likely, though, the PM will push to meet the original deadline with the intent to fix the UI issues later. However, “later� rarely happens. Regardless, everyone wonders: how could these issues have been caught earlier?

The UI is typically built after the essential architectural elements are in place, and it can be hard to test unreleased products with users until the very last moment. However, you can gather feedback early in the process:

• Don’t describe the product and ask users if they would use it. In this case, you are more likely testing your sales pitch rather than the idea itself. If you ask users if they want a new feature, 90% of the time they’ll say yes.
• Test with the users you want, not the users you already have. If you want to grow your audience with a new product, you should recruit users outside your current community.
• Validate that the problem you are solving actually exists. Early in the design cycle, find your future users and research whether your product will solve their real-world problems. Look for places where users are overcoming a problem via work-around solutions (e.g., emailing links to themselves to keep an archive of favorite sites) or other ineffective practices (e.g., storing credentials in a text file because they can’t remember their online usernames and passwords).
• Verify your mental models. Make sure that the way you think about the product is the same as your user. For instance, if you’ve been pitching your product idea to your coworkers as “conversational emailâ€� but your actual users are teenagers who primarily use text messaging, then your email metaphor probably won’t translate to your younger users. Even if you don’t intend to say “conversational emailâ€� in your product, you will unconsciously make subtle design choices that will limit your product’s success until you find a mental model that fits that of your users, not of your coworkers.
• Prorotype early. Create and test a Flash-based or patched-together prototype internally as soon as possible. Even if your prototype doesn’t resemble a finished product, you’ll uncover and develop confidence in the major issues to wrestle down in the design process. You’ll also have an easier time seeing the areas of the product that need animations, on-the-fly changes, or other issues that require significant engineering time that weren’t recognized in the project scope because the product was only explored in wireframes and design specs.
• Plan through v2. If you intend to launch a product with minimal vetting or testing, make sure you’ve written down and talked about what you intend for the subsequent version. One of the downsides of the “release early, release oftenâ€� philosophy is that it’s easy to get distracted or discouraged if your beta product doesn’t immediately succeed. Or upon launch you might find your users pulling you in a direction you hadn’t intended because the product wasn’t fully fleshed out, or dealing with weeks of bug-fixing and losing sight of the big picture. Once the first version is out the door, keep your team focused on the big picture and dedicated to that second version.

Pitfall 2: Users click on things that are different, not always things they like. Curious trial users will skew the usage statistics for a new feature.

Upon adding a “Join now!� button to your site, you cheer when you see an unprecedented 35% click-through rate. Weeks later, registration rates are abysmal and you have to reset expectations with crestfallen teams. So you experiment with the appearance of your “Join now!� button by changing its color from orange to green, and your click rates shoot up again. But a few days later, your green button is again performing at an all-time low.

It’s easy for an initial number spike to obscure a serious issue. Launching a new feature into an existing product is especially nerve-wracking because you only have one chance to make a good first impression. If your users don’t like it the first time, they likely won’t try it again and you’ve squandered your best opportunity. Continuously making changes to artificially boost numbers leads to feature-blindness and distrustful users. Given all of this, how and when can you determine if a product is successful?

• Instrument the entire product flow. Don’t log just one number. If you’re adding a new feature, you most likely want to know at least three stats: 1) what percentage of your users click on the feature, 2) what percentage complete the action, and 3) what percentage repeat the action again on a different day. By logging the smaller steps in your product flow, you can trace the usage statistics within all of these points to look for significant drop-offs.
• Test in sub-communities. If you are launching a significant new feature, launch the feature in another country or in a small bucket and monitor your stats before launching more widely.
• Dark-launch features. If you are worried that your feature could impact site performance, launch the feature silently without any visible UI and look for changes in uniques, visit times, or reports of users complaining about a slow site. You’ll minimize the number of issues you might have to potentially debug upon the actual launch.
• Anticipate a rest period. Don’t promise statistics the day after a release. You’ll most likely want to see a week of usage before your numbers begin leveling.
• Test the discoverability of your real estate. Most pieces of your UI will have certain natural discoverability rates. For instance, consider adding a new temporarily link to your menu header for a very small percentage of your users just to understand the discoverability rates for different parts of your UI. You can use these numbers as a baseline for evaluating future features.

Pitfall 3: Users give you conflicting feedback.

You are running a usability study and evaluating whether users prefer to delete album pictures using a delete keystroke, a remove button, a drag-to-trash gesture, or a right-click context menu. After testing a dozen participants, your results are split among all four potential solutions. Maybe you should just recommend implementing all of them?

It’s unrealistic to expect users to understand the full context of our design decisions. A user might suggest adding “Apply� and “Save� buttons to a font preference dialog. However, you might know that an instant-effect dialog where the settings are applied immediately without clicking a button or dismissing the dialog makes for an easier, more effective user experience. With user research, it’s temptingly easy to create surveys or design our experiments so study participants simply vote on what they perceive as the right solution. However, the user is giving you data, not an expert opinion. If you take user feedback at face value, you typically end up with a split vote and little data to make an informed decision.

• Ask why. Asking users for their preference is not nearly as informative as asking users why they have a preference. Perhaps they are basing their opinion upon a real-world situation that you don’t think is applicable to the majority of your users (e.g., “I like this new mouse preference option because I live next to a train track and my mouse shakes and wakes up my screen saverâ€�).
• Develop your organization’s sense of UI values. Know which UI paradigms (e.g. Mac vs. Windows, Web vs. desktop, etc) and UI values (e.g. strong defaults or lots of customization, transparency or progressive disclosure) your team values. When you need to decipher conflicting data, you’ll have this list for guidance.
• Make a judgment call. It’s not often helpful to users to have multiple forms of the same UI. In most cases it adds ambiguity or compensates for a poorly designed UI. When the user feedback is conflicting, you have to make a judgment call based upon what you know about the product and what you think makes sense for the user. Only in rare cases will all users have the same feedback or opinion in a research study. Making intelligent recommendations based upon conflicting data is what you are paid to do.
• Don’t aim for the middle ground. If you have a legitimate case for building multiple implementations of the same UI (e.g., language differences, accessibility, corporate vs. consumer backgrounds, etc.), don’t fabricate a hodgepodge persona (â€�Everyone speaks a little bit of English!â€�). Instead, do your best to dynamically detect the type of user situation upfront, automate your UI for that user, and offer your user an easy way to switch.

Pitfall 4: Any data is better than no data, right?

You are debating whether to put a search box at the top or the bottom of a content section. While talking about the issue over lunch, your business development buddy suggests that you try making the top search box “Search across the Web� and the bottom search box “Search this article� to compare the results between the two. You can’t seem to place your finger on why this idea seems fishy though you can see why this would be more efficient than getting your rusty A/B testing system up and running again. Sensing your skepticism, your teammate adds, “I know it’s not perfect, but we’ll learn something about search boxes, right? I don’t see a reason not to put it in the next release if it’s easy?�

The human mind’s ability to fabricate stories to fill in the gaps in one’s knowledge is absolutely astounding. Given two or three data points, our minds can construct an alternate reality in which all of those data points make flawless sense. Whether it’s an A/B test, a usability study, or a survey, if your exploration provides limited or skewed results, you’ll most likely end up in a meeting room discussing everyone’s different interpretations of the data. This meeting won’t be productive and you’ll either agree with the most persuasive viewpoint or you’ll realize that you need a follow-up study to reconcile the potential interpretations of your study.

• Push for requirements. When talking with your colleagues, try to figure out what you are trying to learn. What is the success metric you’re looking for? What will the numbers actually tell you? What are the different scenarios? This will help you determine the study you should run while also anticipating future interpretations of the data before running the study (e.g., if the top search bar performs better, did you learn that the top placement is better or just that users look for site search in the upper left area of a page?).
• Recognize when a proposed solution is actually a problem statement. Sometimes someone will propose an idea that doesn’t seem to make sense. While your initial reaction may be to be defensive or to point out the flaws in the proposed A/B study, you should consider that your buddy is responding to something outside your view and that you don’t have all of the data. In this scenario, perhaps your teammate is proposing running the search box study because he has a meeting early next week and needs to work on a quicker timeline. From his perspective, he’s being polite by leading with a suggestion without realizing that you don’t have the context for his suggestion. However, after pushing him for what problem the above study will resolve, you can also help him think through alternative ways of getting the data he needs faster.
• Avoid using UX to resolve debates. UX might seem like a fantastic way to avoid personal confrontation (especially with managers and execs!). After all, it’s far easier to debate UX results rather than personal viewpoints. However, data is rarely as definitive as we’d like. Conducting needless studies runs the risk of slowing down your execution speed and perhaps leaving deeper philosophical issues unresolved that will probably resurface again. Sometimes we agree to a study because we aren’t thinking fast enough to weigh the pros and cons of the approach, and it seems easier to simply agree. However, you do have the option of occasionally saying, “You’ve raised some really good points. I’d like to spend a few hours researching this issue more before we commit to this study. Can we talk in a few hours?â€� And when you do ask for this time, be absolutely certain to proactively follow-up with some alternative proposals or questions, not just reasons why you think it won’t work. You should approach your next conversation with, “I think we can apply previous research to this problem,â€� or “Thinking about this more, I realized I didn’t understand why it was strategically important to focus on this branding element. Can you walk me through your thinking?â€� or “After today’s conversation, I realized that we were both trying to decrease churn but in different ways. If we do this study, I think we’re going to be overlooking the more serious issue, which is…â€�

Pitfall 5: By human nature, you trust the numbers going in the right direction and distrust the numbers going in the wrong direction.

Hours after a release, you hear the PM shout, “Look! Our error rates just decreased from .5% to .0001%. Way to go engineering team! Huh, but our registration numbers are down. Are we sure we’re logging that right?�

Even with well-maintained scripts, the most talented stats team, and the best intentions, your usage statistics will never be 100% accurate. Because double-checking every number is unrealistic, you naturally tend to optimize along two paths: 1) distrust the numbers that are going in the wrong direction and, more dangerously, 2) trust the numbers that are heading in the right direction. To make matters worse, data logging is amazingly error-prone. If you spot a significant change in a newly introduced user activity metric, nine times out of ten it’s due to a bug rather than a meaningful behavior. As a result, five minutes of logging can result in five days of data analyzing, fixing, and verifying.

• Hold off on the champagne. Everyone wants to be the first to relay good news so it’s hard to resist saying, “We’re still verifying things and it’s really early, but I think registration numbers went up ten-fold in the last release!â€� Train yourself to be skeptical and to sanity-check the good news and the bad news.
• QA your logging numbers. Data logging typically gets inserted when the code is about to be frozen. Since data logging shouldn’t interfere with the user experience, it tends not to be tested. Write test cases for your important data logging numbers and include testing them in the QA process.
• Establish a crisp data vocabulary. Engagement, activity, and session can mean entirely different things between teams. Make sure that your data gatekeeper has made it clear how numbers are calculated on your dashboards to help avoid false alarms or overlooked issues.

One of the main tenants of user research is to constantly test the assumptions that we develop from working on a product on a daily basis. It takes time to develop the skills to know how to apply our UX techniques, when our professional expertise should trump the user’s voice, or when to distrust user data. As a researcher, you are trained to keep an open mind and to keep asking questions until you understand the user’s entire mental picture. However, it’s that same open-mindedness and willingness to understand the user’s perspective that makes it easy to assume that because their perspective can make sense, that it should also justify changes within our product design. Or, because we are so comfortable with a particular type of UX research, we tend to over-apply it to our team’s questions.

While by no means a complete list, I hope these five pitfalls from my personal experience will be relevant to your professional lives and perhaps, provide some food for thought as we all strive to become better researchers and designers.

close article | permalink

Sometimes the problem has to mature before the solution can mature.

—Kent Beck

close article | permalink

1) Interesting use of unicode characters for the UI on Flickr:

That triangle up top is actually two triangle characters side-by-side. Sucks that we still have to resort to such hacks for such a common UI shape — but this is a smart solution.

2) Also interesting is this inline tour of the new photo pages. Rollover a number and bubbles pop up to show you what’s fresh for that section.

More...

close article | permalink

They say the first bite is taken with the eye. If so, these appetizing restaurant websites succeed in whetting our appetites, inviting us to a savoury next bite. In these designs, color scheme and introductory copy show vastly different aspects of the restaurant experience. Moody warm tones create atmosphere, vibrant greens underscore freshness, and earthy colors communicate a relaxed, friendly attitude.

Because customers are increasingly using mobile browsers to make decisions on the spot, restaurant websites are doing a better job of communicating core information quickly. Similarly, full Flash websites with no mobile alternatives are seeing some decline. Especially interesting is how these businesses are improving their online menus by replacing PDF-only downloads with Web-optimized alternatives that are more readable and easier to navigate.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Showcase Of Restaurant Designs

Geogeske
This design has printerly qualities, with its eye-catching oranges and whites and oversized headings. Everything works together to establish a relaxed yet smart urban atmosphere. The JavaScript effects (sectional fades and spring-loaded logo introduction) are used sparingly and effectively. Simple navigation and short copy make scanning easy while putting the focus on the strong menu-worthy photography. However, the site could certainly use a larger font size.

Jam Restaurant
Upscale modernist and classical elements are used consistently on this website and in the menu and restaurant interior. The vibrant typographic header looks stunning while enhancing usability by prominently displaying a phone number and hours. Another nice touch is how the body scrolls beneath the stationary translucent header.

Benito’s Hat
Named after a celebrated Mexican president, this restaurant communicates authenticity and freshness with a green cilantro backdrop and clear devotion to its culinary roots. At times, the backdrops on the interior pages eat the foreground text; a little contrast and spacing would help in spots. Overall, an offbeat feel that works.

Pizzeria Napolicentrale
This website uses horizontal navigation to guide the user through photos of mood-setting rustic Italian elements. The beige picnic pattern adds just enough visual interest without competing with the copy. But in some sections, the taller content makes horizontal scrolling a bit floaty.

Barley’s
A cozy design rich in grainy colors and sturdy serifs. Small touches—like the roll-overs, and lighting effects such as in the logo hover state—give a handcrafted feel. Do not miss the nice, readable menu and beer list that feature stylishly simple beer ratings.

State
With nocturnal tones and pictures of people having a good time, the State uses a hip design to say that it’s a cool sociable night spot. Perhaps intentionally, there seems to be little focus on food; for example, the menu section feels skimped (disjointed navigation and flimsy type for the buttons). More photos of the restaurant and food might enhance the personality of this website. Also, the home page seems a tad cluttered. In general, a little more depth in the sub-pages would round out what is a good-looking piece.

Farinella Bakery
Fun and disarmingly honest, Farinella Bakery takes the cake in blending personality and usability. The bold header and fun footer become bookends for the spot-on copy and photos. Notice the slight head bob when you click on the navigation and the magnification when you roll over menu items; a tasty browsing experience. What makes this a winner is that the integrity and consistency of the design can be found in the smallest elements.

Sono
Authentic Japanese design elements and atmospheric audio effects work well to create mystique on this Flash website. A few usability concerns pop out: for example, the flaky JavaScript for the “Back” button and the small text that is in a cramped box with a small scroll bar.

The Little Cake Parlour
This more conventional website shines with gorgeous photography that almost seems edible. The design has a strong focus on typography, with various elements embedded in the elegant pink multi-column layout. Some design elements probably shouldn’t be images and would work better as simple plain text, though. Also, because all visual elements have a similar pink tone, they may be a bit difficult to recognize at first glance — for instance, the pink PayPal-button in the footer of the site.

Pizza Luce
With playful tattoo-like scribbles and quirky photography, Pizza Luce makes clear its immutable place in Minneapolis’ food culture. Check out the oddly captivating home page illustration. For all of these strengths, the community section feels slapped together and in need of a bit of refinement.

La Vista
The clever use of the Flash overlay here adds intimacy and life to the crisp photography. The menu is noteworthy: simple to browse and very clean.

Georgian Wine Society
The backdrop feels like a matte painting that draws us into the headspace. With that, we are receptive to the interesting narrative about Georgia’s role in wine-making. The e-commerce system is well integrated; a more generous margin between elements would augment the shopping experience.

Catered by Kate
This website’s “About” page is one of the top in this showcase. It opens with Kate smiling warmly, giving the page a welcoming human touch. Next, it summarizes (in only two sentences) three very compelling reasons why you would use Kate for your catered event. Just one distracting but easy-to-fix minus: a call-out to an empty Flickr page that is supposed to hold more images.

Can Jubany
This clean layout on deep chocolate brown feels elegant even while containing a surprisingly large amount of content. The home page sets the right tone with the large yet quick-loading video that tells a story. Two more unique touches are the simple sliding navigation and the tantalizing, well-written recipe section.

Caravan
This simple and savvy composition uses negative space to focus on the coffee while adding depth with subtle textures. If the placeholder is this solid, then our expectations are high for the full website!

Chipotle
Humor, earthy tones and engaging (and notably non-Flash) animations make for an experience that is engaging and relaxed yet expertly crafted. Consistent with its corporate message of “Food with integrity,” Chipotle focuses much of the website on its brand rather than the burritos. Be sure to tug the rope in the footer for some hidden and delightful interactivity.

Le 28 Thiers
Here are tangerine and rose hues mingled with crisp photographic elements and textures. The simple wooden table distinguishes the layout and grounds the content visually. Subtle gradients in the typography, quality photography and the curved navigation inject elegance and dimension.

Brooklyn Fare
This playful design achieves a unique charm through imagery that consists of real employees, bookish serifs and a stylish seafoam background. Especially nice is the consistent layout, with its cheerful copy and gritty photography, which avoids appearing repetitive.

Canela
Canela (Portuguese for “cinnamon”) employs a conventional layout, energetic reds and generous imagery to give a sense of flavor and sophistication. The three-column PDF-only menu makes browsing on a mobile device more challenging.

Last Click

Brew Shop
The Brew Shop is not really a restaurant website, but it is still worth mentioning. The site establishes personality at first sight with a hilarious photo and beery good humor. It backs the funny with substance, such as a very usable e-commerce system, effective copy and scannable icon-enhanced navigation. Especially nice are the swaths of red as call-outs and the subtly scrambled type.

Related Posts

You may be interested in the following related posts:

• Corporate Website Design: Creative and Beautiful Solutions
• Showcase of Sweet Chocolate Websites
• Showcase Of Delicious Coffee Websites

Would you like to see more similar posts on SM?

Would you like to see more similar showcases on Smashing Magazine?customer surveys

(al)

© Sam Wilson for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: showcases

close article | permalink

TextMate has become an essential part of my development arsenal over the last few years.

When you first open up the application, you may be wondering what all the fuss is about- at first glance it looks like any other text editor.

The true beauty of TextMate is the plethora of bundles, add-ons, keyboard shortcuts and tab triggers available.

I’m going to go through some of my top tips on how to get the most from TextMate and increase your development productivity.

Tip 1: Find Your Perfect Theme

Getting yourself hooked up with the right theme is essential to a good days development. There is a huge amount out there catering for virtually every taste, so make sure to hunt around for one that’s right for you. Personally I have two themes that really hit the right spot for me:

• Clouds & Clouds Midnight – Two delightful themes especially good for the PHP developer inside you. It comes in two flavors – dark and light, both with strong bold colors that help you work on without getting dreary eyed.
• IR Black & IR White – This is my go too when I’m cracking on with some Ruby work. Again in dark and light versions with fantastic syntax colors. You’ll also find a nice terminal modification for the theme around too.

Theme choice is very much down to preference and what you’ve been used to before, so when you find the right one for you you’ll know. Make sure to search around and give a few a go, but these two are in my mind a great place to start!

Tip 2: Have the Right Plugins

TextMate comes with a great stockpile of neat features out the box but there are a few things you’ll probably think are missing. Here are a few that I’d call essential to get:

• MissingDrawer (Resurrected) – One gripe I had with TextMate from the start was the side drawer- mainly because it wasn’t a drawer at all. This plug-in solved my woes. This plug-in is a must for any serious developer.
• AckMate – As the name suggests, this allows you to run ack within TextMate. TextMate comes with a regular project search, but this is much, much faster when you just want to do a bulk find for something.
• ReMate – Now this plug-in won’t be useful to everyone, but it certainly is for me. If you work on a network mount in the office you’ll find that every time you switch in and out of TextMate your project refreshes and lags, causing you to wait a few seconds before you can do anything again. This plug-in de-activates the automatic refresh and helps save your sanity from going under!

Tip 3: Get the Best Bundles

Bundles are small add-ons that do great things. If TextMate doesn’t default support a language that you work in (HAML & SASS are prime examples) then you can be darn sure there’s a bundle for it out there somewhere. Bundles add syntax coloring, shortcuts and tab triggers to make your development as fast as it can be.

• HAML & SASS Bundles – These are perhaps the most common bundles to be installed. If you work in HAML & SASS you’ll want these badly.
• GIT Bundle – If you use GIT for your version control, then this is a bundle you can’t be without. It allows you to manage your repository from within TextMate, do blame checks and much more. There’s also an SVN Bundle if that’s more your thing.
• CSS & HTML Bundles – Although TextMate comes with some of it’s own, you’re going to want to grab the ones from Minimal Design. They add fantastic tab triggers to virtually eliminate most typing.
• jQuery Bundle – A great bundle for working with jQuery. Features tab triggers for many functions and some pretty good syntax highlighting.

Tip 4: Use those Sexy Shortcuts

This is where TextMate really comes into it’s own. You can find a shortcut for virtually any function to help you on your way to productivity success. There’s far too many to mention them all, but these are some of the key combos that I use on a daily basis.

• ⌘T – Go to File – This shortcut is truly second to none. Instead of trawling through your project drawer or going through the folders in your finder, use this to quickly jump straight to any file you wish to be in.
• ⇧⌘T – Go to Symbol – This works in the same way as Go to File but for within a specific file. Trying to find a set method or a global variable? Look no further good sir, this is what you need. Especially useful for when you’re working with a massive user model!
• ⌘L – Go to Line – If you’re debugging a stack trace, you’ll want to remember this one. Jump to an exact point within a file to squash that nasty bug!
• ⇧⌘L – Select Line – Select the entire line of code you’re working on. Chances are you may want to follow it up with…
• ⌃⌘ + ARROW – Move Code – Move the selected code around the file, helps when doing some refactoring of that nasty functional code.
• ⇧⌃⌥V – Send selected to Pastie – This one is pretty unknown but handy. Send the selected code over to Pastie with a private URL for sharing the code – great when you need some feedback from a fellow developer.
• ⌃S – Simple Search – Most folks know about ⌘F as it’s the same in most applications. However in TextMate it loads up an additional window for find and replace which isn’t always what you want. This shortcut allows you to do a quick search in the current file iteratively.
• ⌘] and ⌘[ – Block indentation – Indenting manually can be a pain – use these functions to indent blocks of code quickly and easily.
• ⇧⌃T – To-do list – This feature scans the project for code marked as ‘FIXME’, ‘TODO’ and ‘CHANGED’. It provides an informative list of them along with comments.

Make sure to do some googling for even more handy functions – if you can think of it, it’s probably there!

Tip 5: Learn your Tab Triggers

Tab triggers are for quick code completion and are invaluable to the well-trained TextMate user. For example typing doctype TAB will give you the option of inserting the appropriate doctype of your choice into your document, even HTML5 if you have that bundle installed.

The triggers are different bundle to bundle, language to language, so make sure to check out your specific bundle for more details.

Where to go From Here?

The best way to learn TextMate is to use it and explore. Try new shortcuts out, look into the gears menu and google until your hearts content.

Also, if you have something specific that you find useful in TextMate, make sure to share it in the comments. One of the best ways to learn the secrets of TextMate is from each other!

close article | permalink

Feb 7-9th 2011
Get ready for the best event you’ve ever experienced.

Sign up to get notified when Early Bird tickets go on sale.

close article | permalink

Hey there!

It’s Wednesday, so this mid-week roundup is devoted to all things business and development.

Some links are newsworthy, some retweeted across Twitter, and others just meet our “awesomeness� requirement, and regardless we hope you’ll enjoy them. Without further delay:

• How do you measure your customer happiness levels? 37 Signals built a little app “Smiley” for that, and blogged a good story.
• Write PHP without coding? Yep, and here’s how to do it. Why you might do it is up for debate.
• An introduction to the HTML5 canvass element
• Expand your world a bit with this one: Six Things I Wish Mom Had Told Me About SSH
• By the numbers: Apple’s Music, Media, & Mobile Sales

Wildcard: Adventures ahead for much-loved and respected Ethan Marcotte (though you may know him better as @beep). 

Please shoot me links to projects your working on or awesome things you’ve released! news@thinkvitamin.com

Handpicked by,

Chrissie (@tenaciouscb)

close article | permalink

Today we are glad to release iCandies Icon Set, a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces. All the icons in this pack — 60 icons in total — are designed in Round Rectangle shape.

Download the icon set for free!

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

• large preview
• download the set (.zip, 5.1 Mb)

A word from the designers

As always, here are some words from the designers of the set:

Dear Smashing Magazine readers, 

IconEden’s 2nd birthday is coming! And we’re as excited about it as you’re. To celebrate our two years of rocking the icon design world, IconEden collaborated with Smashing Magazine to craft a small set of 60 wonderful icons called “iCandies”! And it’s all yours. 

Similar to previous collections, iCandies comes in vector and pixel formats and can be immediately be built into your projects at no cost. You can use the icons for any commercial and personal projects.

Thank you very much, guys! We appreciate your efforts.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Related Posts

You may be interested in the following related releases:

• The Ultimate Free Web Designer’s Icon Set (750 icons, incl. PSD sources)
• Free Medical Icons Set (60 Icons)
• Yummy! Free Food and Cakes Icon Set (20 Icons)
• Quartz Icon Set (90 clean sharp icons)
• gCons: Free All-Purpose Icons for Designers and Developers (100 icons + PSD)

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Freebies, Icons

close article | permalink

With all the attention being paid to HTML5’s <video> tag, few have clued in to what is perhaps the most useful magical pixie dust hidden inside the web’s next markup language: the new semantic tags.

Rather than using <div> tags to wrap your page sections, HTML5 offers much more sensible elements like <header>, <nav>, <section>, <article>, <footer>, <aside> and <time>.

Of course, cool as the new tags are, they don’t cover every situation, which is why, as with HTML 4, you can extend HTML5’s tags to add even more semantic meaning to your pages.

One of the more useful ways to extend HTML is with microformats — small chunks of semantic markup for address book info, event listings and machine-readable metadata. In HTML 4, this is done using the class, rel, rev and profile attributes, along with some established design patterns and nested tags.

However, HTML5 tosses out the rev and profile attributes and adds some new things like WAI-ARIA’s role and aria- attributes, as well as the new data- attribute system.

So where does that leave microformats? Well, the answer is a bit complicated, but our friends over at HTML5 Doctor recently dove into the confusion and have published a rough guide to what works in HTML5. There are some great tips, not only about implementation, but also what you should avoid and what might change in the future.

The article walks through a number of common microformats like address cards and licensing information, showing how they work in HTML 4 and what elements might be extended in HTML5 — like using the time element within the hCalendar microformat.

In the end, while the article has some caveats you should read up on, the good news is that you can safely use microformats in HTML5. Also, be sure to read through the comments on the post as Tantek Çelik, one of the authors of microformats, has some important clarifications and suggestions for using microformats in HTML5.

See Also:

• Where on the Web Is HTML5?
• What Happened to the Microformats Support in Firefox 3
• Microformats are Awesome, Now Put Them to Work for Your Site

close article | permalink

We all want our websites to load faster, but speeding things up can be tricky. There are numerous tried and true tricks we all use to keep page load times down, but once you’ve done a few rounds of optimization, you tend to hit a plateau where it’s tough to squeeze any more speed out of your code.

Most web developers are familiar with tools like Yahoo’s YSlow and Google’s Page Speed. If you haven’t ever used them, go install both right now — they’re available as add-ons for Firefox. Both tools are designed to help you speed up your site’s page load times by showing you exactly what’s slowing them down, and used in tandem, they can alert you to some optimizations you never knew existed.

I recently sat down and tried, as best I could, to do everything that YSlow and PageSpeed recommended and I managed to shave my page load time roughly in half. When I started, my homepage took between four and six seconds to load. Now, it loads in one to three seconds on average.

To compare load times I used both YSlow and PageSpeed, as well as WebPageTest. Those numbers aren’t exactly benchmarks, since there’s some speed variation depending on what’s loaded in the cache, but a performance increase of about 30-40 percent is what you can expect if you haven’t yet explored these methods.

Some of what YSlow and Page Speed will tell you should be obvious — limit your HTTP requests, minimize, compress and combine your JavaScript and CSS files, use CSS Sprites, put your script tags at the bottom of the page and compress your images.

However, some of the more obscure and less-used (judging by viewing source code around the web) techniques these tools point out can make a surprising difference.

Before we get to the “how to” part, keep in mind the old saying “premature optimization is the root of all evil.” What I did with YSlow and its ilk was the last bit of optimization I did. In other words, be sure you’ve taken care of the big problems before you try to stamp out the smaller ones.

That said, I was surprised by how much of a difference some very small changes made.

The Good

Long before I turned to YSlow, I optimized my backend code to minimize database hits, installed Memcached to further reduce the database load, and set up a separate domain to serve static files. The later change made a huge difference since the main instance of my site is running Apache and the static files are now served by a much lighter-weight, faster Nginx server.

The site I set out to test YSlow and Page Speed on is my travel blog, which is somewhat image-heavy. So, the first thing I did was run all my images through SmushIt, Yahoo’s lossless image compression tool that’s part of YSlow.

All of the images on the site were already compressed using Photoshop’s “Save for Web” exporter, but I still managed to shave an additional 2-5kb off my images without any loss of quality using SmushIt. When you’re loading ten or more images per page, that’s a significant savings.

In fact, I could compress my images quite a bit more if I were willing to make some trade-offs in image quality. I’m not in this case, but you might be able to. The best approach in my experience is to see what your overall image size is, run everything through SmushIt and, if you still aren’t happy with the results, go back to your image editor and see if you can compress things even more using lossy techniques.

The Bad

While I managed to squeeze down my images somewhat, for the most part I was already following the more obvious best practices — loading JavaScript last, using multiple domains and so on.

It wasn’t until I turned to my style sheets that I saw where I had really gone wrong.

Perhaps the most overlooked thing you can do to speed up your page is reduce the complexity of your style sheets. Wherever possible, use classes to group similar elements and make sure you take advantage of the cascade. If all your body text is going to be Georgia, define that rule once under the body tag rather than littering it throughout your style sheet.

Another thing you may notice Page Speed telling you to do is “Use efficient CSS selectors.” Browsers read CSS from right to left, so the more specific your selectors, the less time it takes the browser to figure out what to do with that element. The less specific the selector, the greater the number of nodes the browser needs to evaluate.

Consider this HTML, a fairly typical HTMl5 navigation menu:

<nav id="top">
    <ul>
        <li>
            <a href="/" title="My homepage">Home</a>
        </li>
        <li>
            <a href="/" title="My Blog">Blog</a>
        </li>
        <li>
            <a href="/" title="My Photos">Photos</a>
        </li>
    </ul>
</nav>

Now suppose you want to style the actual link element. The most inefficient way to do this would be something like this:

nav#top ul li a { color: red; }

In order to figure out which a you’re talking about, the browser needs to traverse four tags. Let’s redo that with something much more efficient:

<h1>top a { color: red; }</h1>

Now there are just two tags to traverse. And note that we got rid of the nav selector with the ID, and the ID is already unique. There’s no need to add the tag as well.

If we wanted to be even more efficient, we could add a class called “red” to each of our a tags and simply do this:

.red {color: red;}

So how much does this gain you? In my case, re-writing my CSS — which had grown pretty sloppy over the years — dropped a full second from my page load time. That may not sound like much (and it isn’t if you have inefficient database queries or other, bigger problems), but when it comes to this stage of optimization, every little bit helps.

The Ugly

A few of YSlow and Page Speed’s suggestions aren’t possible in some cases, mine included. One big thing that could speed up my static content would be to use a CDN. Unfortunately CDN’s are expensive and outside the price range of small blogs like mine. Also, a shared server is cheaper than a dedicated server, but can be slower.

Other unfixable problems are due to my hosting setup. I can’t set the expires headers for my static files because my Nginx server is global for all shared hosts on that server. Luckily, with Nginx, the first load is pretty fast. The browser may not cache images and static files as aggressively as I’d like, but for now it works well enough. I could compile my own instance of Nginx, and thus set the expires headers myself, but I haven’t tried that yet.

Another problem that Google’s Page Speed tool likes to nag you about is using cookie-less domains for static images. In my case, I serve my static files from the subdomains media and images. Because my top-level domain needs cookies, the subdomains inherit them as well. This is why big sites like Yahoo use an entirely separate domain for static files (usually some subdomain of yimg.com in Yahoo’s case).

There are some other areas that didn’t apply in my case, but may be slowing down your site. One big culprit is third-party content. If you’re loading JavaScript from other sites — to add social networking or bookmarking buttons, for example — pay close attention to how fast those scripts load. They are notorious for slowing your page down.

Another easy way to speed up your pages is to make sure your CSS and JavaScript files are served using GZip compression. Good web hosts should offer a way to do this. If yours doesn’t, consider jumping ship for one that does.

As with any kind of optimization, there are trade-offs involved with nearly everything that YSlow and Page Speed will suggest. For example, to make your CSS selectors more efficient, you may be tempted to litter your HTML with IDs, which is a no-no if you’re trying to maintain good semantic code. Likewise, compressing images is all good and well, but turn them into a pixelated mess and you’ll turn people off no matter how fast your site is.

The secret to good optimization is to find a balance. Provide quality content and wrap it in well-written code, but also make sure what you create loads as fast as possible. Don’t sacrifice too much quality in the name of speed, and vice versa.

Illustration from “Physics for Entertainment” by Yakov Isidorovich Perelman from Archive.org

See Also:

• New Google Tools Help Speed Up Your Website
• Tips For Turning Your Sluggish Website Into a Speed Demon
• Site Optimization Tutorial

close article | permalink

Saturday I was in L.A. for the 2nd annual Epic Direct (formally AzoogleAds) top publisher PlayBoy Mansion Event.

I went last year and it was an unreal experience. I did all the first timer stuff.. took the tours and tons of photos of everything. It was really an amazing experience.

This year Epic Direct had their work cut out for them. How do they pull off the same experience for all the new publishers they brought in while still maintaining the great experience for those who went before.

But Michael Sprouse, CMO of Epic, pulled it off with flying colors.

This year all of the house girls were quite a step up from last year. Not that they were bad looking last year but this year there were solid ten’s everywhere.

They also brought in some new entertainment. They had the reigning national champion pole dancer getting down (I don’t have a pic anywhere but looking).

Also they had this amazing Cirque Du Soleil style show over the Mansion Pool. It was like a FULL BLOWN show. If you have ever seen a Cirque style show you know what I am talking about. It had tons of dancing and aerial gymnastics. It featured America’s Got Talent Ashley Dejon (a finalist in this years show).

I got a chance to talk with Ashley a bit. Really nice girl:

Even the body painted girls were a step up from last year:

Crazy body paint eh?

Special thanks to Epic Direct for not only bringing in my staff for this amazing event but also for bringing in our top 3 ShoeMoney System students who all had the time of there lives .

Here is the dedicated ShoeMoney System team you get to talk to from Epic Direct/AzoogleAds:

And of course my boy Rob Hustle who won the ShoeMoney System Theme Song contest. I think he had fun too .

Maybe too much fun as he almost gets caught up in a triangle choke here:

Thanks again Epic Direct. Special shout out to my affiliate manager Erin Hughes, my good friend Audrey Breheney, and of course the rev pimp daddy Michael Sprouse who made this all happen.

You guys are the best!

BTW – You can view all of my PlayBoy Mansion Party Pictures here

Get a sneak peak at the all new ShoeMoney System

Interested in advertising on Facebook? Check out my latest post on Facebook Advertising

close article | permalink

All smartphone app ideas start somewhere—an entrepreneur starts scribbling on some napkins at the local coffee shop, a visionary sketches on a whiteboard, a team has a brainstorm. Regardless of how your app begins, most app ideas are relatively vague at first, perhaps a basic drawing or a few bullet points of things you want the app to do.

With all the design templates available for Photoshop, Illustrator, and OmniGraffle, many designers may be quick to translate their app ideas into wireframes. While diving right into wireframing may work in some cases, most apps can benefit from some level of upfront user research. User research helps define the high-level product vision, and enables your team to make informed decisions throughout the product life cycle.

In this article, I'll introduce three complementary user research techniques that are well suited to mobile design: shadowing, and field interviews combined with diary studies. I chose these techniques because they can help mobile app designers understand their app's context of use. In contrast to the desktop context, which is relatively self-contained, the mobile context is influenced by many external factors, e.g., people, objects, the cellular network, etc. Understanding these external factors will help mobile designers create great user experiences.

Shadowing

In shadowing, the researcher follows participants over a period of time and records their observations. In contrast to user interviews, the data may be more reliable since user behaviors are observed in their natural context by a researcher. This is often referred to as a "sit back" technique; the researcher may probe with some questions but it's generally undirected. In addition to shedding light on the participant's environment, shadowing may help uncover less tangible influences such as social norms and user perceptions.

Shadowing sessions can take one hour or up to a full day—the context and duration will vary based on the app and the research goals. Imagine that you want to develop an app that enables parents to easily record and share their newborn's special moments. Because the app may be used in a variety of contexts throughout the day, it may require a full day of observations to get an adequate understanding of the parents' needs. In contrast, much less time would be needed for an app for museum visitors to learn about museum artwork since participants could be shadowed in the museum for only the duration of their visit.

Photo from shadowing session with an art dealer. She uses her iPhone to take photos for clients, convert art prices into foreign currencies, and to make sure artwork is level (using the iHandy app.)

Field Interviews

Field interviews, which are derived from anthropological research techniques, are one-on-one sessions with participants in their natural environments. The interviews are semi-structured, meaning the researcher will prepare questions in advance but will adjust the script based on the participant's responses. They typically occur in one place for 1–2 hours, excluding travel. Given these time and context limitations it may be difficult to get a complete picture of the participants' mobile usage. As a result, mobile researchers often supplement field interviews with a diary study. Diary studies, discussed in the next section, can provide more insight into the participant's context over a much longer period of time.

Choosing one place for a mobile-oriented interview can be a challenge. Ideally, the interview should occur where the app will be used most often, providing researchers with a better understanding of the context of use. In the earlier example of the museum visitor app, holding the interview at the museum would enable participants to easily refer to exhibit information and explain what works or doesn't work well for them. If the interviews were held at an offsite location, it would be harder for participants to reference such information and for the researcher to understand the influence of the museum context. Additionally, it would require the user to recall behaviors or memories about the app, which can be less reliable than studying their app usage in context.

Sample Excerpt From a Field Interview With a College Student

"I would have chemistry in the morning for five hours, Trig in afternoon, English at night. My chemistry teacher would lecture for two hours. I would have my periodic table open. I was in class one day and forgot my periodic table. I Googled it and found an iPhone periodic table app. I showed everyone in class and then they downloaded it too. It's free and they have a light version. A lot of people in class have an iPhone—half the class. Everybody is on the iPhone, especially on the train.

"I'd also use my scientific calculator. If you turn the iPhone landscape, it expands. I removed the other calculator app I had installed before. I don't like a ton of apps on my phone at once. So the iPhone replaced my TI89. The other app allowed more numbers than the built-in calculator app, and could do longer equations than the built-in iPhone app. I looked in the App Store under 'scientific calculator,' looking for graphing one. I got this one [shows me]. There was a pop quiz one day so I asked: can I use the phone? Professor said yes but some would say no."

Diary Studies

Diary studies shift the burden of data collection onto the participant. Instead of the researcher shadowing participants for an entire day, participants record their activities over the course of one or more days. When combined with field interviews, diary studies can approximate the depth and richness of data gathered during shadowing sessions. Consider using a diary study under the following circumstances:

• Participants can easily capture the kind of data you are seeking
• You need to collect data over a long period of time, such as in cases where the app is used only intermittently
• You need a non-intrusive way to gather information

Although this approach can lead to valuable insights, there are some limitations. First, participants may not record activities that seem trivial to them but would be of interest to researchers. Second, since participants are mobile, stopping to document their activities could be disruptive or impractical (e.g., when the participant is driving.) Third, diary studies are less effective at ascertaining the how and why behind behaviors. Because of these limitations and others associated with self-reporting research techniques, researchers often combine diary studies with other methods such as field interviews.

Sample Diary Study Entries and Field Interview Clarifications

Choosing a Research Approach

Most smartphone apps will benefit from a combination of user research methods. The optimal mix will depend on the app, your research goals, and the design phase. Very early stage apps will benefit from observational methods, whereas mid-stage apps should benefit most from observational methods as well as prototypes. These app stages are discussed in more detail below.

Early Stage Apps

Companies without a clear concept may conduct user research to help uncover app opportunities. Even though the company has not formulated an app concept, they should have a well-defined audience or problem space in mind. For example, young children often use their parents' iPhones. Shadowing these parents is one way a researcher could uncover app opportunities for this demographic. Similarly, a company may be interested in offering an Android solution for small business owners, thus they may want to interview these types of users to better understand their needs.

Mid-Stage Apps

Companies with a rough app concept can utilize a variety of user research methods. In addition to shadowing and field studies, they may find it beneficial to introduce early app sketches to prospective users. These sketches can be presented in a demo format—meaning the researcher will walk through the sketches and elicit feedback on the ideas—or through a paper prototype study. If the concept is not fleshed out at the user interface level, another option is to create a concept video that will give prospective users a feel for the idea. You can find an example here: http://vimeo.com/2420799

Existing Apps

Apps already in the marketplace may conduct upfront research before designing a significant feature or embarking on a redesign. Regardless of the project scope, the research typically incorporates the existing app. For example, it would be valuable to shadow existing customers as they use your app, or have them diary their app usage over a specified period of time. Alternatively, the app creator may consider running a usability study to establish a benchmark for the app. Lastly, a user feedback survey at this stage can be beneficial for getting a broad reading on features that you may then want to delve deeper into with qualitative research.

Summary

Upfront user research can benefit both new and existing smartphone apps, shedding light on prospective users' context of use, perceptions, pain points, language, and customs. Understanding context of use is critical for smartphone app design since context can be a driving force in your app's user experience. With a solid user research foundation, app creators can make informed decisions throughout the product development process. Moreover, user research can reveal new app opportunities and inspire innovative solutions.

close article | permalink

Late Monday afternoon David, Kiran, and I were discussing how we could begin to measure how our customers felt about our customer service. We’re already measuring things like response time, average tickets per day per person, average tickets in a thread, etc. Those stats are helpful for measuring internal efficiency and speed, but they don’t measure quality from a customer’s perspective.

The idea

We talked about it for a bit and came up with this basic goal: Let’s make it really easy for our customers to quickly rate our customer service every time we talk to them. It’s not rocket science, and it’s not a breakthrough idea, but it wasn’t something we were doing. It was time we experimented with the concept. We’d write some software and try it out. We’d call the app Smiley.

The key

The whole feedback process had to be easy, it had to be fast, and it couldn’t be a burden on our customers. We didn’t want to put people in front of some long-winded complicated survey — no one likes filling those out. We just wanted to ask them one quick question and that was it. The whole thing should take about five seconds and it should be entirely optional. We’d start there and see how it went.

Linked from the email signature

We decided we would add a short link to each support person’s email signature. The link would encode the support person’s ID along with the ticket number for the support request. When someone clicked the link they’d go to our site where they’d be asked to answer one question about the customer service experience they just had. That’s all.

Starting on the design

The next morning I went off and started designing some screens. After a few minutes I had the basic structure. There were five screens total: Three customer facing (and two of those were optional), two internally facing.

1. (Customer facing) One screen which asked a customer a single question with three possible answers.
2. (Customer facing – optional) One screen with a single text field where someone could choose to elaborate on their answer. This was entirely optional.
3. (Customer facing – only seen if someone provides freeform text feedback) One thank you screen someone would see after they submitted their feedback.
4. (Internal) One screen that showed all our customer service people along with their most recent ratings, their overall average rating, and a link to see all their ratings and feedback.
5. (Internal) One screen that showed all of someone’s ratings along with any feedback a customer left on a particular rating.

About an hour or so later I had the customer facing screens done. We went back and forth on a few iterations, and experimented with two options (“great” and “not great”) vs. three options (“great”, “fine”, and “not very good” – we picked this version), but overall the design was settled in about an hour. Originally I used some stock photo smiley faces for the mockup, but I asked Jamie to design some custom smileys for the design (you’ll see these below).

The screen the customer sees after clicking a link in the email signature.

The optional screen a customer sees if they answer the first question.

Hooking it up

Next David took the UI and began writing the Rails back-end to make it all work. While David was working on this, I started working on the internal facing admin screens. I spent a few hours messing around with some ideas, but eventually settled on the simplest version:

More...

close article | permalink