Photo courtesy of Andrew Chen via 52 Weeks of UX

Do you ever feel that your design has become stale and that despite your making lots of little changes to it over time without any big overhaul there is just no way to drastically improve it?

If so you’ve probably hit what Andrew Chen calls the “Local Maximum”. The local maximum is a point in which you’ve hit the limit of the current design…it is as effective as its ever going to be in its current incarnation. Even if you make 100 tweaks you can only get so much improvement; it is as effective as its ever going to be on its current structural foundation.

The local maximum occurs frequently when UX practitioners rely too much on a/b testing or other testing approaches to make improvements. This type of design is typified by Google and Amazon…they do lots and lots of testing, but rarely make large changes. (Except, of course, Google’s homepage background change this week, which was quickly reverted)

While a cycle of smaller improvements is better than the dysfunctional design processes most of us are stuck with, one of the criticisms of this type of extreme optimization is that it’s always and only incremental: you can only make a few small changes at a time and therefore your design evolves slowly. And if you’re doing rigorous testing, by only changing one variable at a time, then you’re only changing one small part of your application in each iteration. This work cycle becomes dependent on how fast you can run tests. For Google and Amazon, who are blessed with millions of visitors per day, this is no problem because they can run tests extremely quickly. For most people building web sites, low traffic volume can be a huge hurdle because it means that tests have to run longer and thus slows down rate of iteration.

To illustrate the notion of local maxima Chen uses the example of a photo upload application, pointing out there are many ways to improve an offering by optimizing what currently exists. You can A/B test the current photo upload page, send out more emails reminding people to upload, add more calls-to-action to upload, etc. It’s easy to both design and test these options.

But after a while these low-hanging fruit get few and far between and as UX designer you have two choices: continue to try ever-increasing alternatives (optimize) that are small enough to test or to try and make a bigger, structural change that really shakes things up (innovate).

Chen points out that other approaches to improving a photo app besides optimization would probably have a higher return. These include:

* Repositioning the product for a stronger value proposition
* Going after a different kind of audience to target their needs
* Recalibrating the “core mechanic” of the product to make uploading photos a natural part of using the product

Because these changes are much larger than a single design element you can effectively test, making a change to them requires making a daring design decision. Someone has to step up and take a chance based on their intuition: what they think will work instead of what testing has proven works.

In order to design through the local maximum we need a balance between the science-minded testing methodology and the intuitive sense designers use when making big changes. We need to intelligently alternate between innovation and optimization, as both are required to design great user experiences.

One strategy we might employ is to optimize until we reach a point of diminishing returns: design until changes just aren’t having a big effect. Then, stop optimizing and return to other kinds of analysis to figure out the next steps. Conduct interviews. Do user testing. Give surveys, ask questions. Find out the biggest existing pain points instead of focusing on tiny design elements at this stage. Focus at the activity-level. What are people trying to accomplish? What are their higher-level goals? What aren’t people doing that we want them to? What big hurdles keep them from taking the next action? This level of insight will allow you to make those bigger changes.

And when the time comes to make the bigger changes, when you decide to jump from your local maximum to some other design possibility, make the decision with conviction. But don’t forget that the optimization has only just begun.

Rather than take a traditional page-design approach, we architected the database and interaction to be slim and exchangeable. First, the database was managed by use of two .NET-based Web Services written in C# that ingested via POST marking transaction success with 32-character IDs, output via XML and with multi-purpose edit functions using switches and variable inputs. Next, the authentication was built on a combination Basic and session-based approach using ASP – quick and efficient and easy to modularize should the system need to be moved to another platform. Finally, the front-end was built on a single HTML page with jQuery and jQuery UI to support the large number of Ajax exchanges and interactive features.

The result is a clean, easy to use, transportable DAM-CMS capable of complex transactions (multi-tiered, synchronous updates), hooks to a Silverlight-based rough cut editor from Southworks, and most of all, easy and quick to modify without affecting the production environment. By deploying a single jQuery-based controller separate from the parser and presentation components, new objects could be introduced to the interface based on a modifiable, dynamic XML document at login (or pushed in real-time, even after the user had logged in).

Some of the things we learned seem pretty silly but in fact were critical to the project completing in such a short amount of time.

First, segregate all the processes – by constructing the database, the web services, and the interface separate from each other, different developers could rapidly deploy all of it and mesh together quickly at stop-points each day. Chandler and I (with a big assist from Srini and Mio) were able to work independently and merge as he completed parts of the web service, or make changes as parts of the interface came together. Likewise, during testing, changes to the interface and sequence could be done in real-time and re-tested within minutes instead of having to go back to the drawing board. This was eased by the fact that issues could be easily attributable and divisible to interface or back-end, and handled separately.

Second, it’s the little things that make a difference. Providing small visual cues – update notifications at the top of the page that disappear, Ajax loader starburts, highlighted labels and input boxes – all give the user information, information that helps them get through difficult or tedious and complex processes (for example, in creating a VOD asset, a user had options that might require upwards of 50 different pieces of information – eliminating unnecessary components on the screen made it easier to get through).

Finally, architect it but be flexible. Changes happen, and while developers and project managers all try to keep scope creep from happening, we all know that in the real world, so does feature change. It is unrealistic to assume that projects will get started 6 months before the deadline. It is also unrealistic to assume that, in such a project with a short deadline, that you’ll remember to include everything. Likewise, it’s also unrealistic to assume that during the process you’ll realize that the planned interface will work – prototyping is great but it takes time and testing that you may not always have. Being able to be flexible by following a basic interface design, using modular builders (in jQuery UI or other framework) and XML-based instruction sets, and providing error catching systems in both the front-end as well as the web services makes the project continue to move, even when not all the parts are correct.

In the end, we had a lot of hiccups and it didn’t go as smoothly as we’d hoped but it did get done and delivered on-time. The client goes to training in 9 hours and there will likely be another round of changes, but that we were able to post a full-featured DAM CMS in such a short amount of time gives us new methods and targets for the future.

For years, the only other options were to use images (which then lose the semantics and made it difficult to update over time) or sIFR (which still rocks and can provide much more extended support for very unusual fonts).  Now you can add Font API support with:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

body { font-family: 'Tangerine', serif; }

Produces (though this is an image):

According to Google, the back end system converts the font into a format acceptable to the browser (including MSIE6), serving up only the weights and styles you specify, and can be cache headered in order to optimize/improve performance over the span of the site.  They also work with HTML5 and CSS3, so transformations like rotation and drop shadows still works.  Currently support exists only for Western European languages (Latin-1) but I’m pretty sure that will expand quickly once it takes hold.

Nice job!

Read the Google announcement here.
See the fonts available in the Google Font Directory.

[authored by Matthew Carpenter at Six Revisions, images courtesy of Six Revisions]

When it comes to expanding per-project revenue, service businesses are at an immediate disadvantage. As our “product” is essentially our time, increasing income on a per-project basis almost always comes with extra work and an increased time commitment. Office hours increase, personal time slips away, and before we know it, the “extra” $300 weekly income has turned into little more than lost time.

Product-based businesses have a distinct advantage when it comes to increasing revenue. Rather than increasing per-hour costs or per-project estimates, all that’s required is an increase in scale. Expand your operation, ship more units, and earn more money. While service businesses can take a similar approach–more employees, more projects, and relatively more income–scale can again become a problem.

These ten approaches to per-project earnings could help you boost total revenue and profits. Of course, they’re not foolproof, and some businesses will inevitably invest time into a strategy only to have it prove ineffective. However, they do work, and with the right balance of time investment and experimentation, they could become the changes that drastically increase your per-project, per-client, and per-hour revenue.

1. Don’t take on stressful or high-risk projects

Risk is a part of business. While service businesses operate at a slightly lower level of risk than a major product-based business or global company, they’re still taking cost-related risks whenever they accept a new project. The amount of time required could surpass expectations, the project’s complexity could be deceptive and surprising, or the entire project could be a stress-test disguised as something simple.

Whenever certain revenue is the goal, take on projects that offer security and relatively smooth income. Increasing revenue can be as simple as taking on more work, which is made easier when you’re not juggling complex projects.

2. Keep a network of contracted designers for project overflow

There are hundreds of reasons to network with other designers, and managing work overload and excess projects is just one of them. As with any business operating at 100% capacity, there are going to be times when your clients will expect you to take on work that’s simply not possible. Rather than scrambling to find new designers, managers, or developers, it’s best to keep a relatively wide network of professionals ready to offer contracted work to.

This selective and optimized outsourcing also gives you an opportunity to increase overall revenues. While your design team works directly on clients projects – earning on an input basis – outsourced design teams can bring in a relatively stable per-project income for you.

3. Use affiliate programs to help clients with hosting

If your design business specializes in local businesses and low-tech companies, it’s not unlikely that your clients will need their own hosting space or dedicated server. While it’s unwise to take care of hosting entirely on your own – problems can often arise, and client support is not a business that you want to be involved in – passing clients on to an affiliated hosting company is never a bad idea.

A range of hosting providers offer affiliate programs, some of which are more lucrative than others. Whenever possible, aim to provide hosting that meets a clients needs, not those of your business. It’s worth eating a small commission to keep a major client, and it’s never worth selling out a client for a one-off hosting kickback.

4. Don’t use a reseller hosting program for clients

Reseller hosting programs are often viewed as an ultra-simple passive income solution for web designers. Unfortunately, they’re about as far from passive as anything can be. Whenever you take responsibility for web hosting, you also inherit every problem that would otherwise be directed to the web hosting company.

Every second of downtime becomes your concern, every connection speed issue becomes a phone call  to your office, and every time a client forgets their cPanel password, you’re the person that’s called for support. Focus on low-maintenance revenue increases, not income streams like reseller hosting which require ongoing support.

5. Market yourself as a premium provider

Don’t want to deal with clients that pay poorly? Then don’t market to them.

Whether you’re a freelance designer or part of an established design business, the audience that you market your services to is by far the largest influence on your per-project income. Audiences that have come to expect low-cost services will expect the same from you, and explaining a premium cost structure instantly compromises your ability to offer services.

Study the market that your business operates in, and approach premium clients with your services. Most businesses don’t mind paying a higher price for high quality services, and if you can back up your promises, those clients can be great long-term assets.

6. Network other creatives and online professionals

Networking gives you an opportunity to hand off work to extra designers in the event of a quantity crisis. It also gives you an opportunity to market your services to other online workers, increasing your professional network and creating another stream of incoming clients.

However, there’s another benefit to networking, one that can do wonders for per-project earnings. Most online services businesses are happy to pay for business leads, or at least offer a commission for valuable projects. Create a professional network between yourself and some online marketers, copywriters, and other service businesses that are beneficial to new businesses.

That way, when you’re approached by a new client, you can offer them extra value through related services, and yourself more per-project income through related commissions. Win-win.

7. Offer extra services in project updates and pitches

There’s nothing wrong with a friendly, non-pushy upsell. By including an ‘extra services’ rate card or list of related products or services with every project email, you’ll find your business increasing and your professional relationships extending. Most clients want your web design services to increase their long-term business income, and extending projects to incorporate long-term marketing, design, or website upgrades can often do just that.

8. Aim for ongoing business relationships

Short-term projects can be a hassle. While they’re often worthwhile from an earnings perspective, the amount of stress and unnecessary headaches that come with them can drive a sane business owner crazy.

There are two ways to deal with short-term projects effectively. The first, and most effective method, is to ignore them completely and focus entirely on long-term projects and ongoing work. The second method is to make your short-term work more immediately profitable and effective. Charge higher rates for short-term projects, let your clients understand that you work with other clients too, and create accommodating timeframes your yourself.

9. Prioritize clients that have long-term growth potential

When seeking out new clients, it’s tempting to fall for the “take all” approach where you let accept almost any project, so long as it meets your income criteria. While this strategy is great for filling out a schedule, it almost never works effectively for maximizing per-project income and total revenue.

Opportunity cost is a true nightmare for a service business. Product-based companies can pass over opportunities only to focus on scale, but service businesses with set resources and time allotments are always stuck with the projects that they’ve taken. Taking each and every project that’s offered to you leaves you with no room to focus on the most profitable and valuable clients.

Whenever possible, prioritize new clients that have massive growth potential. The brand new marketing firm with a dedicated owner is more likely to need your ongoing services than an aging local business with relatively low online needs. Give time to clients that have huge potential to expand, and you’ll end up getting it back again in projects that are lucrative, long-term, and very secure.

10. Say “No” more often

Saying “yes” wins you clients, opportunities, and information, but it also locks you into deals that might not work in your favor. Despite the old “customer is always right” maxim, the reality of service businesses, particularly design businesses, is that the client often isn’t right. Design is subjective, and when a project comes coupled with a client that just doesn’t know what they want, things can become a major headache.

Increasing per-project revenue isn’t just about optimizing what projects you do have, but making sure you pick the right projects not to have. Every potential opportunity can be a drag for your business – an ongoing annoyance that brings in income but leaves you shut out of more lucrative products. Fight away per-project time-killers by saying “no” more often. It hurts at first, but the more you do it, the more effective your business will become.

Have you ever experimented with different revenue streams or per-project income strategies? There are hundreds of ways to increase per-project earnings, and we’ve just scratched the surface!

So I set up a WP instance for her to play around with and it looks like she’s digging it. She’s worried that she’s going to lose some of the benefits of using the Google-based platform but I think that with the stats she has (trust me, she’s way beyond what MatSays will ever do) she doesn’t really need to worry.

The one downer note – the import function works great but it puts Blogger tags as WP categories so you might have to massage the DB by hand a bit. Wonder if they are aware of that little bug.

Scratches on discs happen. After one of our favorite DVDs started to skip after receiving a few too many scratches we started to look for a solution to salvage it. Sure there are DVD scratch removal devices that you can buy, but why waste money when there is a solution to be found right in our own homes? Using toothpaste, a banana, a rag and window cleaner we will show you how to remove scratches from a DVD and with any luck the unplayable will become playable.

What You Need

Equipment:
toothpaste
clean rag
banana
window cleaner

Instructions

1. The first thing you do is apply toothpaste on the scratched surface of the DVD. Next, rub the toothpaste gently into the DVD using the rag. Let this sit for about a minute.

2. Remove the toothpaste from the DVD using the rag. Then take the cut banana and in small circular motions rub the banana into the DVD. After you have applied the banana to the DVD, you will then take the peel and use this to rub the DVD in small circular motions.

3. Clean the DVD using the rag. Make sure to remove all the traces of the banana and peel. Spray window cleaner onto the surface of the DVD and continue cleaning the DVD. If you are lucky, your formerly unplayable DVD has now been salvaged!

Additional Notes: We experimented with using just toothpaste and just the banana, but we received the best results from using the toothpaste first and following it with the banana.

Fortunately the gods have prevailed and though I’d been goodie-goodie (meaning resistant to) about rooting my G, I finally decided to after some prompting (and a well made video showing how easy it was to do).  And damn, it works, and yea, it was easy and quick.  Nice work!

Sources:

• Five Great Reasons to Root Your Android Phone on Lifehacker
• Get Root Access in Android with One Click on Lifehacker
• Android Rooting in 1-Click from RyeBrye

While is why I am extremely proud of the evolution of the CMS that I designed and built for the Wimbledon Live player (see this post).

To understand the complexity behind designing the UX it’s important to understand the nature of the data and the critical effect of the workflow. First, video was being supplied from six sources, some to us using Saviant direct to our servers, some we pulled via FTP, and then of course the live streams (some HD and some SD). Then there were multiple parties…NBC (as the news reporter) needed editorial control over metadata, while iStream’s Managed Webcasting team needed to control the timeline over when items went to publication. My team, RnCS (Research & Creative Services) needed to insure that everything was tested before going live so we needed to throw the whole thing through a staging server before hitting a production server that then fed a cluster of edge servers on Akamai’s network.

So we structured it in several parts. First we put automated bots to determine when new assets had been dropped, specifically seeking out XML files that held the initial metadata, and dropped that into the CMS DB. Once there, the appropriate parties were notified by email (or in my case as PM, by SMS) – to update metadata, insert images, begin video transcoding, etc. Through the entire process, we designed screens to make it as easy as possible to follow the flow of assets, provide enough ability to each staff person so that overlaps in duties existed but that checkpoints assured data integrity throughout.

The grid above, for example shows the visual layout of the thumbnails that would appear in the cover-flow style playlist inside the player. Deep linking was provided so editorial users could create pointers on the MSNBC/NBCSports sites. Drag and drop allowed us to reorder objects to maximize the visibility of prominent players.

Each level of user had various modal windows to insert data. Even imagery was uploaded first to the staging, processed for size and then sent to production.

Because of the nature of edge servers, we also had to purge the cache after any update, so we provided a three-section grouping that allowed us to send the feed XMLs to production and clear the cache in one shot. And to make THAT process even easier, we built it so that it was accessibly by mobile phone so even if I was in transit, I could still update the CMS in a timely fashion.

Finally, the live streams had the ability to be toggled on and off so that the matrix of available feeds, particularly the Smooth HD stream, was optimized and prioritized. To be sure, there was still much room for improvement but given that the whole CMS was built in 6 days and now, five days into Wimbledon, has eased us into a steady, smooth workflow, speaks volumes for making it easy to use, intuitive (for example, the color designations on the player match the ones in the CMS, big text and extensive micro-transaction Ajax created an interactive environment), and overall a good experience.

WordPress is often thought of as just a blogging platform. But it’s capable of so much more. Even WordPress’ documentation includes an entire section on using WordPress as a content management system. Because WordPress is such an easy-to-use platform, it makes sense to consider using it as a platform to build just about any kind of website, a portfolio website included.

Whether you’re a photographer, graphic designer, Web designer or any other kind of visual artist, WordPress makes an excellent starting point for developing your online portfolio. And with the wealth of plug-ins and ready-made themes available, you can usually get a perfectly presentable website up and running in a matter of hours.

So get on the bandwagon, listen, learn, try, play and get some stuff done!

Excellent article on a consistently overlooked problem for most web designers – help elements.  A help element is anything that provides the user with assistance in completing a task.  They come in many shapes, sizes and formats but the primary goal is to be unobtrusive but noticeable and, well, helpful.  Most designers/developers look at help elements with trudgery but in many cases it can actually enhance the user experience.

The place we frequently see help elements is in form completion and validation.  Why we somehow can’t provide scripts that reduce error rates in the first place is beyond me, but I suppose in a lot of cases you still have to provide visual cues and alerts to help some users out. 

In HCI we consider that a standard free-form entry is the most volatile of inputs and sure enough, that’s where you’ll encounter the most errors, but don’t neglect the other visual aspects, including external labels, internal (low contrast, like the one shown below) labels, direct manipulation (such as calendar popups). 

The extremes of direct input error handling might be dates and telephone numbers, but here you may need to also consider flow; if within the form you require country, simply provide formats that the user will be more familiar with (such as auto-complete country codes).

From Matt Cronin’s post:

Usability is the Key

With any website design, one strives for usability. Usability is the key factor in the success that a website achieves. Usability is simply about making things easier for your users — and help elements certainly do that. But are your individual help elements themselves usable?

Don’t Confuse the User
Confusing the user contradicts the purpose of the help element, so avoid it. Only put in content that is appropriate to the element. The way you organize content within the help element affects usability. If the element contains a lot of content, use lists and highlight keywords so that the content is easy to scan.

Placement Has a Major Impact
In Web design layout, placement of objects is a top usability consideration. Likewise for help elements, placement affects usability.

Many designers make the mistake of making help elements (i.e. buttons, links, etc.) very small so that they don’t get in the way of the website’s main content. The problem is that they become hard for the user to find. Sure, their small size leaves room for more content, but that won’t help a confused user. Find a balance between subtlety and accessibility.

Also remember that help elements should be optional for the user, not required. Allow the user to choose to get help, instead of immediately showing the element.

Next time you’re designing your site, put some extra consideration into the help elements and see what ideas you can come up with.  Send me some examples of your clever solutions via comment.

“Site conversion” is a very dry and unexciting way of saying “how to get more profíts from the same amount of website traffic.” Isn’t that a more upbeat way of expressing it? Who doesn’t want to get more profíts from the same number of visitors?

Increasing your conversion rate is a straightforward, even dramatic way of positively impacting your bottom line. It really cannot be emphasized too much that any improvement at all in your conversion rate means additional revenue that is total profít.

Remember this fact when you are told that the way to “make more money” is to invest in more traffic-generating schemes (and dreams, at times). Before you start spending more money to generate additional traffic, you need to do as much as you can with the traffic you are already getting. If you keep the horse ahead of the cart in your planning, you will have an efficient, stable, measurable conversion rate from which you can extrapolate x amount of additional profit from y amount of new-traffic generation.

The following tips are not in any particular order (except for Number 1), and can be modified and reordered to suit your particular situation. Take ownership of the change and improvement, and make sure everyone involved understands the importance of maximizing every revenue source, beginning with the existing ones!

1: Before you can repair or improve something, you have to have a good way of measuring where you are, what you’re doing, where you’re going, etc. You can sign up for a free Google Analytics account and use other low- and no-cost tools to develop your “analytics” and “metrics” – essentially fancy words that tell you how you’re doing with numbers.

2: Create landing pages that are both keyword- and campaign-specific. Try separating any related pay-per-click keywords into smaller and tighter groups, and then create the landing pages for each of those new subgroups. Conversions will almost certainly be better if keywords, advertising approaches and landing pages are thematically related and tightly integrated.

3: Test different headlines and copy writing. This might be the most effective way of quickly showing improvements. Therefore, you need to write compelling copy or find someone else who can do it for you. There is plenty of free advice about this (much of it worth every penny you pay for it), but the importance of copywriting as it affects site conversions cannot possibly be overstated. This is key.

4: It is very important to test your pricing, as it really does make a huge difference in conversions. If your goal is to maximize customer value, then the highest converting price may not actually be the optimal one. In other words, if you raise your price by 50% and only see a 10% reduction in conversions, you will more than compensate for the drop. Going the other direction, if you lower the price 15% and this doubles or triples your ratio, your gain compensates for your price reduction. Test your prices, and test them in both directions.

5: Website load time has become an oft-overlooked item in this age of “broadband everywhere.” Load time is critically important in reducing your “bounce rate” on landing pages. There are various online services that will measure your load speed (websiteoptimization.com), and when you know what it is, you can reduce it by compressing images, removing redundant items, optimizing your style sheets (CSS) and HTML code, and so on. The referenced website will also give you advice on other ways to improve your site’s load speed.

6: Clearly identify the sales path(s) and discard any points of resistance, or bottlenecks. Even if you have just a single product, there may be a number of different “paths” that lead to a sale. Perhaps you have a landing page to acquire visitor contact data, which then takes them to a sales page, thence to an order page, and so on. Check your metrics and analytics carefully and you should start seeing patterns in how your visitors navigate your site. If you can see when, where and how visitors are leaving the site, you can delete unnecessary steps, enhance the sales copy or the “call to action,” insert a few testimonials, emphasize your warranty or something else to capture that business. Do everything you can to keep the sales process simple and straightforward. The less confusing it is, the less resistance visitors will display.

7: Let your praises come from others’ lips. Sometimes talking about oneself can sound egotistical, and it has been clearly proven that third-party testimonials boost conversions. In marketing it is called “social proof” when you bring in statements and assessments from others to buttress your message. If you add testimonials – short blurbs, highlighted quotes, letters – to your various landing pages, sales pages and even shopping cart pages, you will almost invariably notice an improvement in your conversion rate.

8: You need to understand the mind of your market, and your customer’s experience with your website. Place an order on the site yourself as you step into the mind of a first-time visitor. Identify the hang-ups, inefficiencies and confusing or missing components that hinder your conversions. In concert with step #6 above, you want to identify why you are not converting, so that you can make the necessary improvements, whatever they may be, to improve your ratio.

9: Some people believe passionately in the power of media on landing, sales and order pages to raise conversions considerably. Others are not convinced, and there is not much hard data from controlled studies to consult. You should consider testing this idea yourself. You should try pages both with and without automatic play engaged. The idea is to lower buyer resistance, and if media helps, all the better. Music, motion graphics and video do add life and personality to your website, but there is a “sweet spot” (balancing point) and the fact remains that different age and cultural groups respond differently to the media. You need to make changes here in the context of your site’s demographics. You wouldn’t put rock music on your page of ladies’ perfumes, probably – unless you have a 20-something demographic and it’s a signature fragrance from U2 or some other chart-topping band.

Aren’t most of these lists called the “top 10″ this or that? You can count this tip as a bonus, then: Keep track of everything you do! Nothing “goes without saying” anymore, so you are hereby reminded that all your hard work can go for naught if you do not keep good records of what changes you are making, when, where, why and how. Chart your progress, review it regularly and don’t be afraid to make continuing refinements as you move along your strategic path.

Finally, as a “super bonus tip” – use some kind of sales accelerator, “offer intensifier” or other method to move people faster through the sales process. It could be a special “one time” or “limited time” offer, a limíted quantity offer or even a “special event” promotíon. Research what’s going on at other sites in your industry and others, and stay abreast of what seems to be working. Add your creativity to the mix, tailor things to your company’s situation and you should start seeing increased conversion rates in short order.

Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors.

Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors.

In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively.

[read the entire article at Smashing Magazine]

You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you’d need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.

1. Logo
Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.

It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.

[read the entire article here at SmashingMagazine]

Recently WebTrends blogged that Twitter search will now be listed in the standard search engine and keywords report in WebTrends. Omniture has also blogged about integrating Twitter search data into Site Catalyst.

As Twitter increasingly becomes a tool that people use to find information it is really critical for companies to know how people are finding their sites on Twitter. Doing so will allow them to incorporate that learning into future marketing efforts on Twitter as well as other sources (e.g. Google etc).

Since Google Analytics does not yet recognize Twitter search as a search engine like WebTrends or Ominiture does, I will show you how you can do it easily with one line of code.

However, keep in mind this solution only works when the search originates on Twitter (i.e. http://search.twitter.com). 3rd party tools like TweetDeck, those will not be captured in this solution (nor will it, I believe, be captured in WebTrends’ solution). Use this information to understand general search keywords being searched on Twitter but do not get caught up in actual number of visits that your Twitter efforts are driving.

So how do you capture searches conducted in Twitter?

GA provides a few functions to allow you to add your own search engines to the list of search engines that are already tracked by GA.

_addOrganic(newOrganicEngine, newOrganicKeyword)

You simply call this function right after var pageTracker = _gat._getTracker(“UA-XXXXXX-X”); This functions to track any custom search engine.

Twitter uses “q” as the querystring that contains the keyword. So in this case our search engine is search.twitter.com and newOrganicKeyword is the value in query string q

So you code will look like

var pageTracker = _gat._getTracker(“UA-XXXXXX-X”);
pageTracker._addOrganic(“search.twitter.com”, “q”)
pageTracker._trackPageview();

(Note: pageTracker._addOrganic(“twitter”, “q”) will also work)

What will the reports look like in Google Analytics?

Note: For some reason I cannot get Twitter search to show up as Twitter in Google Analytics Search Engines report, it shows up as “search”(Maybe it’s a bug in GA? If anybody can provide pointer that will be a great help). However, for now this works fine as long as you know what “search” means in your search engine report. I am playing with filters and if I get that resolved I will post the fix or if you know the fix please email me.

Search Engines Report will show the following:

Drilling down to keywords will show the keywords on Twitter Search.

Looks like Twitter Search brings me repeat visits and more engaged traffic.

[original article here]

Once installed, it adds an additional panel to the FireBug console labelled “Reference”. Check out the screen shot to see the changes and be sure to get all the details on SitePoint’s web site.

More and more applications these days are migrating to the Web. Without platform constraints or installation requirements, the software-as-a-service model looks very attractive. Web application interface design is, at its core, Web design; however, its focus is mainly on function. To compete with desktop applications, Web apps must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.

In the past we didn’t cover web applications the way we should and now it’s time to take a closer look at some useful techniques and design solutions that make web-applications more user-friendly and more beautiful. This article presents the first part of our extensive research on design patterns and useful design solutions in modern web applications. Below you’ll find a collection of 10 useful interface design techniques and best practices used in many successful web-applications.

1. Interface elements on demand

Simplicity is important in user interface design. The more controls you display on the screen at any time, the more time your users will have to spend figuring out how to use your interface. When there is less choice, the available functions become more apparent and are easier to scan. Simplifying an interface isn’t easy though, especially if you don’t want to limit the app’s functionality.

When you click on the search link in Kontain’s search box, a similar drop-down menu appears. So, if you need to narrow your search, you can use the menu to select the sort of content you’re looking for. Tucking these options away simplifies the search box.

One way of making things simpler is to hide or conceal advanced functionality. Find out the most commonly used functions of your interface and tuck away the rest. You can do this with pop-up menus and controls, which are very common on desktop software. For example, if your search bar has advanced filters, put them away in a special drop-down menu at the end. If users need those filters, they can enable them with just a couple of clicks. Deciding what to keep and what to conceal isn’t a simple task, though, and will depend on how important and how frequently used each of the controls is.

When you click on the search link in CollabFinder, you aren’t taken to a different page. Instead, the search box controls drop down, allowing you to begin your search straight away.

2. Specialized controls

It’s important to select the right interface controls for the situation. Different situations can be handled in different ways, and certain controls are better at their intended task than others.

Backpack has a compact calendar date and time picker for selecting a reminder date.

For example, you can select a date by using drop-down lists for day, month and year. Drop-downs aren’t very efficient, however, when compared to a calendar picker, where you can click directly on a day you want. Calendar pickers also help you see the days, weeks and months (and especially workdays and weekends) more easily and so allow you to make a more informed decision more quickly than you would with a simple drop-down list.

MyBankTracker’s APY calculator features easy-to-use slider controls for quickly trying out different projections.

Another good example of this are sliders. Yes, you can always input a number manually, but for certain situations, slider controls do a much better job. Not only are they easy to use — just click and drag — but you can also see how your selection fits between the minimum and maximum of an available range.

3. Disable pressed buttons

One of the problems Web applications encounters with forms is the submission process. With very simple forms, if you click the “Submit” button twice or more very quickly, the form will be submitted two or more times. This is obviously problematic because it will create duplicates of the same item. Preventing duplicate submissions isn’t very hard, and it is essential to do this for most Web apps.

There are two tiers to this safeguard: client-side and server-side. We won’t go through the server-side safeguard here because this will vary depending on the programming language you use and your back-end architecture. What you should essentially do is put in a check to ensure during the processing stage that whatever is being submitted is not a duplicate, and if it is to block it.

Yammer disables the “Update” button while your new message is being submitted.

The client-side stage is much simpler. All you have to do is disable the “Submit” button the very moment it is clicked. The easiest way to do this is to add a piece of JavaScript to the “Submit” button like this:

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

Of course, we would advise you to also implement server-side checks to be sure that duplicates don’t get through.

4. Shadows around modal windows

Drop shadows around pop-up menus and windows aren’t just eye candy. They help the menu or window stand out from the background by reinforcing its dimensions. They also block out the noise of the content beneath the window by darkening the area around it with a shadow.

This technique hat its roots in traditional desktop applications and helps the user to focus his/her attention on the appearing window. Since most modal windows aren’t as easy to distinguish from the main content as in desktop applications, shadows help them to appear closer to readers, because the window appears to be three-dimensional and lay above the rest of the page.

Digg’s log-in window has a thick shadow around it to block out the noise of the page beneath.

To achieve this effect, designers often create a container with a transparent PNG-image as background and place the content inside the container – with equidistant padding on all sides of the box. Another option is to use a background image with transparent borders and position the content box within this box using absolute positioning. This is exactly what Digg does — this is the image they are using (dialog.png). And this is the markup and CSS-style they are using:

(X)HTML:

<div id=”container”> <div style=”display: block; top: 236px; opacity: 1;” class=”dialog”> <div class=”body”> <div class=”content”> … </div> </div> </div> </div>

CSS:

.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001; } .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

Alternatively, you can also use JavaScript-based lightboxes or drop shadows using CSS3-attributes we’ve described earlier, but you need to be aware that Internet Explorer won’t support them.

Basecamp’s project switcher window has a large soft drop shadow that helps the menu area stand out.

5. Empty states that tell you what to do

When you’re designing a Web application, it’s important not only to test it with sample data, but to ensure that it looks good and is helpful when there is nothing there yet. You should design the empty states.

When there is no information for a page or query yet, a helpful message telling the user how to start could go in that empty space. For example, a project management application’s home page may list the user’s projects, but if there are no projects yet, you could provide a link to the project creation page. Even if there is already a button to do that on the page, an extra bit of help doesn’t hurt.

Campaign Monitor points you in the right direction when you start building an email campaign.

This technique encourages users to actually try out the service and proceed directly with using the service after registration. Guiding the user through single steps of the application may help him or her to understand what advantages the application offers and if it’s useful or not. It is also important to present most important options to the users and only them — it doesn’t make sense to overflood them with numerous options. Keep in mind that users usually want to get a more or less concrete idea of what is offered to them, but they don’t want to jump into details — they have neither time nor interest in it.

Using empty states to motivate users and animate actions, you can significantly reduce the amount of “drop-outs” and help your potential clients to gain a better understanding of how the system works.

Wufoo’s forms page has a large, friendly message inviting you to create a new form if none yet exist.

6. Pressed button states

Many Web applications have custom-styled buttons. These are anchors or input buttons that have custom images assigned as their backgrounds. The default input buttons may not be suitable in some cases, and the text links are sometimes too subtle. The challenge is, when you make your links look like buttons, they should act like buttons — and this includes having a “pressed” look when the user clicks on them.

This isn’t a purely visual tweak. Giving instant feedback to the user will make the application feel more responsive and bring the experience closer to what the user experiences on desktop applications.

You can add a pressed button state with CSS by styling the active pseudo-class of the link in question. So for example, if your anchor has the class add_task_button, you can style its active class by targeting add_task_button:active.

Buttons in Highrise actually show a pressed state when you click on them, providing the user with a satisfying responsive feel.

7. Link to the sign-up page from the log-in page

Some people who haven’t yet signed up to your application will inevitably end up on the log-in page. They likely want to try out your application but can’t find the registration page in a hurry. Perhaps they’ve tried accessing a feature that’s only available to registered users.

Don’t have a Delicious account? No problem; a sign-up link is provided on the Delicious log-in page.

Goplan has a nice colored button on the log-in page pointing to the sign-up page.

Make things easy for these folks by placing a registration link on your log-in pages. If they haven’t got an account yet, they shouldn’t have to look for a registration page. Our studies confirm: 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe).

8. Context-sensitive navigation

It’s important to think about what the user expects to see and what they need in every given context. You don’t need to display the same navigation controls everywhere because users simply may not need them in every situation.

One of the best examples of context-sensitive controls is the recent change in the Microsoft Office 2007 interface, in which the default set of toolbars was replaced by ribbon controls. Each tab on the ribbon holds different controls relating to a particular activity, be it editing graphs, proofreading or simply writing. Web applications can also benefit from such context-sensitive controls because these controls help unclutter interfaces by showing only what the user needs, not everything that’s available.

Lighthouse features a familiar tabbed navigation menu; however, it also has a second level of menus right under the set of tabs. This level displays only the items associated with the active section of the website.

9. More emphasis on key functions

Not all controls hold the same importance. For example, on a screen for creating a new item, you may have two buttons: “Create” and “Cancel.” The “Create” link is more important because that’s what the user will be doing most of the time. Only rarely will they need to cancel the screen. So if these controls are located side by side, you may not want to give both the same emphasis.

The “Create ticket” button in Lighthouse. You can see the “cancel” link next to it, in plain text. The button not only commands more importance but also has a larger clickable area and is easier to spot because of its frame.

To shift emphasis to the “Create” link, we can simply use different styles or types of controls. Some applications use the form input button for the create action, and have the cancel action as a text anchor. This not only gives the create button more clickable area, it also helps to grab the users gaze better when they’re looking for it.

10. Embedded video

While pictures and text are a great way to communicate and teach your users about your app’s features, video can be an even better alternative if you have the resources to produce it. Video has been gaining popularity on the Web in recent years. For Web apps, videos are generally used on the marketing website as a kind of screencast to show off a product’s features; however, this isn’t the only way to use video.

GoodBarry features a video screencast on its front page showing off the product. It also uses screencasts inside the app to teach people on how to get started.

MailChimp includes tutorial videos right on the admin panel to help out new users.

Some Web apps use video inside the application itself to teach users how to use certain features. Video is a fantastic way to quickly demonstrate how your product can be used, because it is easier to consume than a page of text, and it is also much clearer because the viewer can see exactly what to do.

Web design isn’t art. It involves a whole collection of different skills — from copywriting and typography to layout and art — all fused together to create an interface that not only features a pleasant aesthetic but that communicates function and facilitates easy access to its content.

But in order to combine all these elements of Web design together and achieve successful results you must have a clear direction, a direction that will guide each and every aspect of your design towards common goals. You must think strategically.

What is strategic design?

Strategic design is the fusion of your organizational goals with every aspect of your design process. You aren’t simply designing a user interface that looks good and is usable and accessible. You’re designing an interface that will help you accomplish your organization’s objectives.

There are many websites out there that look fantastic and sport the latest trends in design yet often fail miserably in their intended function. Design trends are, of course, important because they give you fresh inspiration and new techniques, but the implementation of those techniques and styles needs to be intelligent and focused. For example, a blog isn’t a marketing brochure; you should focus on usability and readability rather than style. Similarly, a promotional website for a computer game should feature graphics and styles that portray a specific feel and style; the aesthetic is very important here.

When the designer simply implements a look and feel that is fashionable at the moment (think Web 2.0 trends) without any thought of how they fit the function of the website or the business behind it, the end result is unlikely to be very effective.

Web design is all about crafting an interface that communicates function, is usable and accessible and exudes the right emotion and feeling. Effective Web design needs all of these elements to be in tune with the goals of your website and in sync with the organizational objectives behind the website. Strategic design is all about identifying those goals and using them to guide your design.

Implementing Strategic Design

Let’s take a look at how we can use six steps to think strategically about a Web design project:

1. Establish your goals

One of the first things you need to do before starting work on a Web design project is to be clear about your client or organization’s goals. What are you trying to achieve with the new website or redesign? What is the website’s main purpose? Ask your client, your manager or yourself what those are. If they or you don’t know yet, then they should be discussed and agreed upon. A clear direction is essential if you want your design to have a purpose.

Remember that a website isn’t a piece of art; it’s an interface that serves a function. That function may be to sell products, to deliver informational content, to entertain, to inform or to provide access to a service. Whatever that function is, your design must focus on fulfilling it. Goals are also important, especially if you’re doing a redesign. Ask why you are doing the redesign: are you looking to grow the number of sign-ups, decrease the bounce rate or maybe increase user participation?

Take a look at the design of the New York Times website above. Its function is to deliver informational content. The minimalist interface serves this function beautifully by fading into the background.

In contrast to the New York Times, AdaptD is a Web design studio, so the goal is not to deliver a lot of content but to impress visitors with its design, showcase a gallery and advertise the company’s services. The visuals are very important here, and AdaptD delivers a browsing experience with beautiful imagery and strong colors.

2. Identify your audience

Who your audience is will play a big role in how your website should look and function. There are many demographics here that can influence your design, ones like age, gender, profession and technical competency. A computer game website for a younger audience needs a different style than that of a serious business journal. Usability should play a bigger role for older and less technically savvy audiences.

Who your audience is will not only influence the general aesthetic of the website but will also determine a lot of smaller details, like font sizes, so make sure you’re clear about who will be using your website.

This is the unsuccessful jQuery rock-star redesign. The designer went too far in trying to create excitement and so failed to cater to the more serious, techy audience. Since then, the rock-star graphic has been replaced with a more conservative look.

Disney’s target audience is kids. The intent is to entertain and involve this young audience, and the design does it by wrapping the content in a fun, colorful interface with a lot of visual and interactive elements.

3. Determine your brand image

A lot of designers tend to get a little too inspired by the latest trends and then implement them without thinking first about what sort of image they really should be conveying. Glossy buttons, gradients and reflective floors may work for some websites, but they may not be right for your brand.

Think about color. Think about the feel you want to achieve and emotions you wish to elicit. Your design should embody the personality and character of your brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be.

Carbonica is a website aimed at helping people reduce their carbon emissions. The environmentally friendly image of the website is crafted using a lot of recycled paper images and textures, as well as earthy green and brown tones.

Restaurantica is a restaurant reviews website. Its design illustrates this by taking on the look and feel of an actual menu you would see in a restaurant.

4. Goal-driven design direction

You’ve established the purpose of your website, set some goals you want to achieve, identified your audience and determined your brand image. You can now proceed to implement it. So how do you make design decisions sync with your strategy? Let me illustrate this with a likely example.

Suppose your main objective is to increase the number of subscribers to your Web service. How can your design help accomplish this goal? I can see at least three things here that will make a difference:

• Make the “About” snippet on your landing page as clear and concise as possible. Your visitors must not have any confusion about the function of your website.
• Use color and contrast to make the registration button or link stand out. If people can’t find it, then you won’t get many sign-ups.
• Streamline the registration process by removing unnecessary and optional elements; people can fill those out later. If the form looks long, people may be put off of filling it in.

These are just three ways you can lead your design towards accomplishing the goal of increasing the number of sign-ups to your service. Your goals may vary, but the strategy is the same: shape and focus all the design elements towards meeting those goals.

The same strategy applies to your brand and audience: design the aesthetic that best suits it. If your website’s focus is entertainment, then create an “experience.” You are free to use a lot of color and imagery to shape that experience. On the other hand, if you’re designing a website that is focused on information consumption, for example, a blog or a magazine, then focus on usability and readability. Create an interface that fades away and doesn’t distract the user from accessing the content.

Stubmatic is an online box-office application. Their external website has two purposes: explain what the service does and get people to sign up. New visitors may only remain on your website for a few seconds, so if you don’t want to lose them you must be concise. You can do this by:

• Using large imagery and diagrams to illustrate the function of your product or service.
• Showing screenshots of your application. People will want to see what it looks like before they commit to a download or sign up.
• Providing a tour, using descriptive examples of how your service can help them solve a problem. Show a video if you can; the less effort people need to make to understand how your app works the better.
• Having the sign-up link accessible from all pages.

To succeed, the website must make the best use of the very limited amount of attention visitors will be giving it by not only informing but educating them about what your product does, and selling the benefits it provides. Stubmatic uses design elements effectively to pursue those goals.

TechCrunch is one of the more popular tech blogs. Its new design removes every single unnecessary graphical element from the page. What’s left is just the content, advertising and navigation. Subtle lines and grey shades give the page structure, yet the interface is almost invisible and places content straight into the front row. For a blog that posts several new articles a day, this format is ideal because it facilitates fast and easy access to the content.

5. Measure results

Once you’ve designed and deployed your website, it’s time to measure your success. This is just as important as the first two steps because until you test how well your design performs, you won’t know whether or not it is effective in fulfilling your goals.

If your goal is to increase the number of sign-ups to your service, measure it and see if your changes are making a positive impact. If you want to increase the number of subscribers to your blog, check your RSS stats. If you want to increase user involvement, see if you get more comments or more forum posts or whatever else is relevant in your context.

You can, of course, also ask people for their feedback, and this is a very good way to check if you’re on the right track. Be careful though not to implement every suggestion people make. Everyone has different tastes and wants, so everyone is going to have a different opinion about what your website should look like. If you do collect feedback, look for patterns; see if there are common issues that crop up and deal with those.

Measuring various website metrics is a whole science unto itself and is beyond the scope of this article. But however in-depth your analytics are at this stage doesn’t really matter; the important thing is that at the very least you have some way of measuring your key objectives. You can use this information to see if you’re moving in the right direction with your design and with any future changes you or your client make.

Even if you’re on a tight budget, you can use free tools like Google Analytics to get a lot of data on how your website is being used, including overlays of your pages to see what links people click on most as well as the ability to track conversion funnels.

6. Kaizen

There is a Japanese philosophy called “Kaizen,” which focuses on continuous improvement using small steps. When you work on your website, you should be thinking of Kaizen because the version you’ve just published is not the final version. There doesn’t even have to be a final version.

You can always make improvements, and the very nature of a website will allow you to introduce these at any time. This is because a website isn’t a magazine that you print and sell: once a magazine copy is out of your hands, you cannot make any changes or fix any spelling mistakes or errors. A website, however, sits on your server: if you find a mistake, you can fix it right away. In the same vein, you can introduce gradual improvements and updates to make your website more effective in serving its function.

Using the results of your measurements, you can identify problem areas. Perhaps your visitors cannot find the RSS feed link, or your bounce rate is too high or an important page on your website isn’t getting enough visits. Whatever the problem is, there will always be a way to improve things.

Conclusion

The main gist of strategic design is simply common sense: you’re making something for a specific purpose, so of course it should fulfill that purpose through its design. But it is actually very easy to lose track of your goals and end up with something that is beautiful but ultimately doesn’t work in its context. It’s very easy to fall into the trap of implementing the latest design trends just because they look attractive or shaping a section of your website to resemble another website that you really like without first thinking about why you are doing it or how it fits in with the purpose of your project.

Avoid falling into these traps by thinking through every design decision you make. Why is this button this color? Why are we using tabs? Why should we use icons here? Once you get into the habit of questioning your every design decision, the whole process will become much more focused. Think about the product or organization you’re representing. Think about the target audience and your brand. What will work in this context? What is expected? How can you use design to best fulfill the website’s purpose? Don’t just build a beautiful website: make a website that really works.

About the author

Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)

[excerpted...article by Kate Rutter via Adaptive Path]

There’s always been a strong visual element to our work: architecture diagrams, interface wireframes, concept models, system and service models. We’ve become adept at the computer applications that help us create these things, but there are other tools out there, such as the simple tools of pen, paper and sketching.
About two years ago, Adaptive Path experienced an upwelling of analog approaches. We started using design tools that jumped out of the screen and into the real world. We started using our hands to make things.

Alongside our computers there appeared slabs of blank paper. Rather than reaching for a mouse, we started reaching for a Sharpie. Large rolls of paper and drafting dots became part of the lingua franca of client working sessions. Sketching was the new black.

And we saw the impact of these approaches in many ways: more visibility for design solutions. More engagement in collaborative working sessions with clients. More design artifacts co-created in real-time. Our design solutions got faster and stronger.

There’s a lot of research to support the idea that visual thinking activates different parts of our brains than language thinking. Pictures allow a holistic view of something. "Seeing is believing" holds especially true when working with a diverse group of people.

Graphic elements create stronger memory and recognition points; it’s easier to remember an image than a page of text. Illustrations communicate ideas faster than descriptions, because processing pictures requires less "translation" than written language. This means more meaning in less time. In addition, there is a tactile pleasure to hand sketching that is rich and engaging.

Analog tools of pen and paper have had a major impact on our work. Looking back over the past two years, there are overall themes in the hands-to-paper trend. Below are four techniques that have supported more rigorous capture and exploration of ideas, fostered clearer communication of concepts, and as a result have enabled better and faster design. Each one is illustrated with a visual so that you can see how the different methods shift the nature of the info.

1) Hand Sketching
In order to become adept at capturing ideas and concepts visually, we need to know the basics of hand sketching. For the work we do, hand sketching falls into two main categories: drawing people, places & things; and drawing abstract concepts and ideas.

Drawing People, Places, Things
Getting comfortable with hand-sketching things, people and objects is key to communicating complex ideas for service design, product design and environments/spaces. We need to be able to communicate scenarios and interfaces clearly and visually, but at low fidelity. Tools in the toolkit are the basics of composition, shape, line quality, color, perspective and creating abstract human forms. Put together, these elements comprise a visual language for telling compelling stories visually and quickly.

What it’s good for:

• Illustrating product concepts and product interfaces.
• Creating scenarios and storyboards.
• Drawing physical spaces.

What it looks like:

View the larger image on Flickr.

Drawing abstract concepts & ideas

• Using simple shapes and lines to create compelling pictures of abstract concepts.
• Distilling thoughts from a group into a unified, clear picture.
• Creating visuals that "solve problems and sell ideas" (Dan Roam’s great quote!)
• Forwarding conversations with product and business stakeholders.

What it looks like:

View the larger image on Flickr.

• Capturing group conversation and contributions in real time.
• Using visuals and note-taking to guide the conversation.
• Developing a language of symbols to communicate potent concepts.
• Create an artifact of a shared experience.

What it looks like:

View the larger image on Flickr.

• Pushing your thinking out from a central concept or idea.
• Organizing your thoughts and ideas.
• Breaking away from lists and creating spatial notation.
• Figuring out what the heart of an idea is.
• Understanding the scope of a concept.

What it looks like:

• Capturing a presentation, talk, article, book or personal idea exploration.
• Combining words and pictures to illustrate and evoke meaning.
• Developing a personal style for visual communications.
• Maintaining a strong personal visual practice.
• Sharing ideas with others: friends, colleagues and community members.

What it looks like:

According to google, the idea is to:

1. Enter more effective and specific search criteria quickly
2. Reduce the chance of spelling errors
3. Save keystrokes

I’ve taught how to build these in past Ajax (IMD322) classes.  It’s always a good way to introduce the idea of combining PHP database lookups with Ajax and incremental data pulls, but frequently at a cost to UCD.  And though some of the products iStream has put out have similar mechanisms, it can often be a bit of an annoyance, especially when the drop down ends up covering the button.  True, it can be helpful and true, there are some instances when it can be a godsend (such as when trying to piece together tags in delicious posts).

Read more about it here.

1. Proper use of <h#> tags
Many themes I’ve looked at do not use <h1>, <h2> and so forth properly.  Remember that the search engines (and POSH) dictate that the header tags place emphasis on specific information (which should include things like the title, the date of publication or the author).  Comb through the single post and main index templates to make sure there is consistent use of both <h1> and <h2> tags (at the very least, and preferably <h3> as well) and adjust the CSS to get the look and feel you want instead of relying on class-based <div> markup.

2. Too many links on the index page
Two problems here – first, the increase in links (past 40) decreases or dilutes the value of importance placed on the page.  At the very least, push the most important posts on the front page and consider whether or not you need the others.  Second, why are you sending people elsewhere in the first place?  Sure your friends might run a great blog but do you really need 100 listings in your blogroll?  Consider that external links in your posts should not go past 2 each and that you should keep the total number of links as close to 40 as possible.

3. Bad keyword choices
Especially on the main index page, it is critical that you consider your choice of keywords and mold your page to the proper density.  Use a free tool like Google’s Keyword Tool to find ones if you’re unfamiliar with structuring keywords.

4. Alt and title text
Always, always, always include alt attribute text on images and preferably include a title attribute on links and lists so that search engines know what tags to associate with the image.

5. Unique keywords
Every page in the site should have a) unique titles and b) different keywords.  You may even opt to remove the name of your blog from the page title because in the end it’s just a vanity thing isn’t it?  There are several plugins that can help you do this by converting the text and tags on the posts into the keywords and description <meta> elements.

6. Fix your markup
Bad markup is, well, just bad.  This goes for both the HTML as well as the RSS feeds.  By default (the newer versions of) WordPress provides at least 4 places to get the feeds from: www.domain.com/feed/, www.domain.com/comments/feed/, www.domain.com/wp-rss.php, and www.domain.com/wp-rss2.php and you should provide appropriate links to them as needed.

Now many of you (all 5 reading this post) are probably asking why I don’t even follow these rules necessarily and the fact of the matter is that for this blog, I don’t personally care.  I publish this for information purposes and largely for my students, not really for the public at large.  Should I teach by example, sure I should; but there are many other ways to get this information across, so I do as I wish.

Note for my students: especially #s 1, 2 and 6 I’ve spoken about in class frequently – if you have questions about any of this over the coming week – ASK!

But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. You’ll find that the more knowledge you have about optimal CSS practices, smaller file size will inevitably come as an direct result of their implementation. You may already be familiar with some of the principles mentioned below, but they are worth a review. Being familiar with this concepts will help you write optimized CSS code and make you a better all-around web designer.

1. Use Shorthand
Using shorthand properties is the single easiest practice you can do to cut down your code (and coding time). There’s no better time than the present to start this efficient coding practice, or to review it. Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!).

2. Axe the Hacks
But now we know that using conditional comments to serve hacks correctional declarations for IE6 and IE7 is an accepted practice, even recommended by the Microsoft IE development team. Using conditional comments to serve IE-specific CSS rules has the added benefit of serving a cleaner, and therefore smaller, default CSS file to more standards-compliant browsers, while only those browsers that need the hackery daiquri (i.e. IE) will download the additional page weight.

3. Use Whitespace Wisely
Whitespace, including spaces, tabs, and extra line breaks, is important for readability for CSS code. However, whitespace does add, however miniscule it may be, to page weight. Every space, line-break, and tab you can eliminate is like having one less character.

4. Prune Frameworks and Resets
If you’ve chosen to use a CSS framework (including ones you’ve written yourself), take the time to review the documentation as well as every line of the CSS file. You may find that the framework includes some rules that you don’t care to use for your current project, and they can be weeded out. This goes for resets as well.

5. Future-proof your CSS
However, I’m warming up to the idea of separating layout styles from the rest of the styles, and giving layout it’s own file, or at least it’s own section.

6. Document Your Work
Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Your future self might appreciate reminder of how your CSS grid framework is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS.

7. Make Use of Compression
Some great applications have been created to compress and optimize CSS for you, allowing you to serve a human-unreadable but still browser-friendly files that are a fraction of the origional working copies.

[Read the article in its entirety at Smashing Magazine]

These are the elements of functional design, the process of responding to the needs or desires of the people who will use an item in a way that allows their needs or desires to be met. Functional design is both an outcome and a process. As an outcome, it describes products that work well to perform their assigned tasks; as a process, functional design is a set of practices guided by the principles that produce that positive outcome.

I’m not going to bother repeating the article here – please take the time to jump over to SM and read it.  However, here’s a quick synopsis:

1. Consider the product’s goal
Determine that one primary goal of the site and make sure that everything you do revolves around that fundamental concept.  Every addition you make, every tool you provide, every piece of text you write should be dedicated to that goal.

2. Consider who will be using it
As JJG proposes, identifying the target audience can be a critical factor simply because most designers either fail to take it into consideration or misjudge it.  Audiences vary and so do their wants, needs, and abilities.  Cater to that need: a product has to work equally for all its potential users if it’s to accomplish its goal.

3. Consider what your audience intends to do with it
What your audience does may not be what you do.  YOU are not the audience, your users are.  Every user comes with intention, learn what those intentions might be.

4. Is it clear how to use it?
We designer/developers have a tendency to go beserk with our functionality.  Don’t.  "Clarity is the key to functional design".

5. How does your user know it’s working?
Provide feedback…it’s the only way your user knows that he or she is using it right.  Provide visual cues, highlight the necessary parts.

6. Is it engaging to your users?
One of JJGs two tenets and the one that I believe is fundamental to all things Web – is it engaging.  I harp on it nearly every quarter but I don’t think many people really see it.  Example: four times this week alone I’ve seen references to Blackberry’s as engaging – owners cannot seem to put them down or stop fiddling with them.  Whether its the feel, the interface, the haptics or the information it provides, there is definitively something engaging about them.

7. How does it handle mistakes?
JJG makes a big point of discussing error handling.  We as dev-igners pretty much think we never make mistakes.  Just because you can run through your web site and never encounter an error doesn’t mean your user won’t.  Users make mistakes.  Or more succinctly, your user will not do the same things you do.  How does the site correct, adjust or respond to errors?

For example, let’s say that you’ve created a table to hold all of your users logins and passwords (and some other info):

CREATE TABLE users (
   userID INT NOT NULL IDENTITY(1,1),
   login NVARCHAR(32) NOT NULL,
   passw NVARCHAR(100) NOT NULL,
   email NVARCHAR(50) NOT NULL,
   uName NVARCHAR(50) NULL,
   uCreated SMALLDATETIME NOT NULL DEFAULT (getdate())
)

On the one hand you can simply write a simple query in your server-side script (here in ASP.NET):

string mySqlQuery = "SELECT * FROM users
   WHERE login = '" + strLogin + "' AND passw = '" + strPass + "'";

And that would work great.  But now lets say you’ve constructed a second table containing more normalized information about the user:

CREATE TABLE usersMetadata (
   userID INT NOT NULL DEFAULT (0),
   dataDescription NVARCHAR(50) NOT NULL,
   theInformation NVARCHAR(1000) NULL
)

So what if you wanted to pull certain information about a specific user?  Once again we can write a simple query:

string mySqlQuery = "SELECT usersMetadata.*,users.*
   FROM usersMetadata
   LEFT JOIN users ON users.userID = usersMetadata.userID
   WHERE userID = " + intUserId + " AND dataDescription = '" + strSomeInfo + "'";

And that would work great too.  But as those of us who develop large-scale web sites know, we re-use queries over and over, frequently.  So what happens when we change the query on one page and neglect to change it on another?  Now we have two pages with different results.  Not good.

Using a stored procedure, we now give ourselves direct access to a centralized query.  This means that if we change it once (on the server), it changes for all instances of it.  So how do we do this?  Writing a stored procedure is relatively simple. 

CREATE PROCEDURE dbo.getUserMetadata
   @userID INT,
   @dataType NVARCHAR(50)
SET NO COUNT ON
BEGIN
   SELECT usersMetadata.*,users.* FROM usersMetadata
   LEFT JOIN users ON users.userID = usersMetadata.userID
   WHERE userID = @userID AND dataDescription = @dataType
END

Calling stored procedures is a snap too. Instead of writing out the entire query, we can just execute the procedure as:

string mySqlQuery = "EXEC getUserMetadata @UserID, @dataType";

Note that we would declare the @ parameters as well

Stored procedures can also be great when you need to extrapolate data from multiple places and perform additional actions on the data before output.  Stored procedures, for example, allow you to create, use and destroy temporary tables of information without affecting the whole.  Say, for example you want to test how your data might react if performed but you don’t want it to go against the live table first.

CREATE PROCEDURE dbo.testUserUpdate
SET NO COUNT ON
BEGIN
   -- this is the temporary table
   CREATE TABLE #users (
      userID INT NOT NULL IDENTITY(1,1),
      login NVARCHAR(32) NOT NULL,
      passw NVARCHAR(32) NOT NULL,
      email NVARCHAR(50) NOT NULL,
      uName NVARCHAR(50) NULL,
      uCreated SMALLDATETIME NOT NULL DEFAULT (getdate())
   )
   -- inserts all users created in the last month to the temporary table
   INSERT INTO #users SELECT users.userID,login,passw,email,uName,uCreated FROM users
   WHERE uCreated > DATEADD('dd',-30,getdate())
-- apply some silly change like altering the password for any user with a login beginning with an a
UPDATE #users SET passw = 'KILLED-YOUR-PASSWORD' WHERE login LIKE 'a%'
   -- now display the data
SELECT * FROM #users ORDER BY #users.login
-- and be sure to destroy the temporary (it is temporary after all)
DROP TABLE #users
SET NOCOUNT OFF
END

This procedure will have the same basic effect as having made the update to the users table but instead applied it to transitory data that was destroyed before leaving the query. Now assuming that the results were good, you could ideally just have a second procedure to actually alter the original table.

Shortly we’ll add to this post with an update. In the meantime, code on!

In any case, I am testing out Windows Live Writer to create this very post.  The installation is annoyingly slow but so far so good.  The interface is pretty slick clean but whether or not the functions work well remains to be seen. Will update you when I get more into it.

Truth is that despite its maturity, the web interface for WordPress authoring is annoyingly tedious to work with and I almost invariably end up going straight to the HTML editing (code editing) which can be annoyingly slow when working with very long posts (though I’ve largely gotten rid of them in favor of downloadable PDFs).

if you haven’t noticed, I’ve been doing some minor tweaks to my site in preparation for this quarter’s UCD Integration class as a proof of principle and demonstration of using plugins, mashups and semantic data techniques.  Nothing drastic, just a bit of interface updating, some new sidebar plugins, blah blah blah.  This is going to be a fun but difficult class, really looking forward to it. 

I’ve also been trying to post quite a bit more.  I know that by and large my readership is just the student body of AILV but occasionally I get others.  I hope at least some of the posts you find some use for.  Anyway, any comments are always appreciated … have some stuff I’ve been working on to post up later next week and the class materials should be up shortly.

Happy Independence Day!