Web Strategies from A through Z focusing on UX

I have been having a look at Drupal sites to find out what innovative designers are doing with Drupal. Unfortunately I have to say that I haven’t seen may efforts to produce visually interesting sites. Thats probably why most people don’t like Drupal, because it is ugly. I would say that more than simply ugly sites, Drupal sites tend to end up being too cluttered, full of modules and information, ending up looking like magazines. This make it impossible to read or find whatever you are looking for, this is because on a clutter of text where every piece has the same weight it is impossible for the user to scan the page.

Everyone knows that most of the times that you chose a Drupal CMS to host some sort of community, you do it because it is easy to install, you don’t need to worry about the design because you can use one of the free themes and above all, it works.

It is clear that there are limitations to the design, but there are workarounds and there are plenty of ways to use the limitations in your advantage to make the site look different.

The first site I would like to comment on is Apart From War this is a great example on how jquery can enhance the look and feel of a Drupal website and make it standout.

Screenshot of the Apart From War Site

Another site I wanted to show you in here is We Are Frost Fire This is a good example on how commercial sites can use Drupal to produce a site that don't look like Drupal. Very clean site with good call to action, very well made.

Screenshot of the site We are Frost Fire Next site I wanted to show you is Rezanova A very modern-looking site that uses well the integration of background textures in the design. I like the integration of tweeter and social sites, as well as the use of icons for the navigation. A very solid design.

Screenshot of the site RezonovaLast example I wanted to show here was the website from the Philadelphia Old City District. This site looks more like a regular Drupal site, but there is some design efforts that I find interesting. First of all an original top menu (I am not too fond of it, but it is original), then I like the weather forecast on the top side, I agree that if you want to check a site for events in a specific area, having a weather forecast is a very welcomed feature. The rest of the site could use some more consistency among elements, this is a common problem in Drupal sites, even when there is not too much information, the modules look cluttered like here because the dimensions don't match. Overall, a very interesting effort and with some more work this could be a very good Drupal site.

Screenshot of the Philadelphia Old City DistrictAs I said at the beginning, it is not easy to find interesting Drupal designs, but there are some, of course. I will keep browsing the web and I will show here some more examples in the future.

Last week I read this excellent post at Boag World I cant agree more with Paul Boag in his point that User Experience is not restricted to the User Experience on the Website (like many people think). He makes several points on why this is such a key concept for a company to understand.

I would like to add a couple of things to his post to prolong his reflexion. One of the main issues that a company faces when trying to keep an overall successful user experience is that different departments have different policies, and sometimes there is some sort of competition among these departments. Also, people from different departments have different priorities, and usually, they don’t have the general vision to understand what is good for the overall user experience, instead, they look for what is better for the user in the context of each department. A classic example is the: "Lets add this paragraph on the shopping process so that we don't get five user complains every month". Well, the extra paragraph usually is directed to a niche group and showing this information to everyone, the experience of all the users is affected. There are always ways around theses issues, unfortunately it usually takes some extra work and there is never the time to do it.

In my opinion there is the need of a cross-department group that is in charge of testing and user experience evaluation. Things like copy writing review (error messages, double meaning sentences, poorly written areas, outdated text, misleading text on the packaging, etc.), web flow (unnecessary steps, lack of call to actions, errors, etc.), customer support, how fast/satisfactory is the response, package opening (if the company sells physical products), mobile support, social media, refunds, how informed are the retailers on the company's product, etc.

This cross-department group should review all the processes (online and offline) also bring real users to the testings and produce informs with the conclusions of the testings that can bring to the decision-makers in the company and show where are the problems and how can they be fixed. When the errors are corrected, they should test again and produce new informs to evaluate the progress.

Websites, now more than ever are living entities, they have to be updated often, prices change, products change, even users change, the company website have to be updated constantly to keep up with all these changes.

Thats why these cross-department groups should be permanent inside of the companies, it is not a enough to perform these sort of tests only once or twice a year, the website must be reviewed constantly, there are always things to improve and a pretty website that works well is not going to help when it takes two weeks for the users to receive the products at home. Users are now more demanding than ever and they have the tools to make the world know if something stink in your company's website. Keep it in mind.

One of the most common questions when people show their design concepts is: which one do you like best? In design, it is wrong question. If you put two or three items in from of a person and ask what do you like best can lead to a misleading response.

When you ask a person what do you like best there are three traps. First, you are erasing knowledge on your side about possible interesting insight from the other concepts. The other thing is that we assume, in fact that the person likes what they chose. They might not like any of the options but they are forced to give an answer. And third, you are asking for a “personal” insight, and this is not what we want.

Before asking questions, you need to know what sort of information is relevant to obtain, so whenever you are asking it is important to keep a target. The more valuable information you give the other person the more chances for you to get information that you can use.

Lets see the following example:

You are sitting down with an important stakeholder on the company you work for and you have three different concepts designed for the landing page of the Christmas campaign. A proper approach would be:

We have worked on three different concepts for the Christmas landing page:

Concept A.- Is a heavy focus marketing solution. Considering the clients that reach the landing page are new customers, we have planned a landing that is aggressive and focus on sales.

Concept B.- Is a landing page focus on creating community. Getting the user to register in the company and get the new client to start receiving our communications and via this medium term strategy impulse sales.

Concept C.- Is a mix of the two before. It split focuses on strong marketing wording via aggressive sales focus, and the encouragement to join our mailing list

This way of presenting the question is more elaborate but it will give a background to your interviewee. Presenting the information this way you also leave a door open to test the different concepts, and at the same time you can get individual feedback on the three mockups. Just think about what short of answer you would get from:

Which one of these three concepts do you like the most?

On the other hand side, the question might be applicable on marketing when we want to see what item would the user choose to purchase, but this is a different context and, in this case you know that the short of answer you are looking for is more like, “I prefer this product for this and that reason”.

Be aware about the “like” question anytime, even in your daily life, are those familiar? “do you like my new haircut?”, “what pants do you like best on me, the red or the blue?”.

I have been reading lately about synesthesia and I have found it very interesting specially for the use of the knowledge of it focusing on branding and marketing.

Synesthesia is a neurologically-based condition in which stimulation of one sensory or cognitive pathway leads to automatic, involuntary experiences in a second sensory or cognitive pathway.

A common form of synesthesia is the color-graphemic synesthesia where the subject perceives letters or numbers as colored. There are other ways of synesthesia, like the visual motion → sound synesthesia which involves hearing sounds in response to visual motion.

At this point you might be asking yourself, all right, this is a condition that affects a small group of people, why should we care about synesthesia when thinking about design. Here is why:

The above image belongs to a test designed by Wolfgang Köhler, people are asked to choose which of two shapes is named bouba and which kiki. 95% to 98% of people choose kiki for the angular shape and bouba for the rounded one. Even 2.5 year-old children (too young to read) show this effect.

Here is when this gets interesting. If 95% to 98% of the population have a similar “brain linkage” then we can start considering that 95% to 98% of the population are synesthesic to some extent.

First thing I can think of is branding. A brand that chooses an image that doesn’t match very well how our brain perceives reality might end up being harder to remember for the customer or even produce a repulse reaction.

On the book, “Marketing aesthetics: the strategic management of brands, identity, and image” By Bernd Schmitt, Alex Simonson. They use the example of Gillette, in 1989 Gillette chose the agency Desgrippes Globe that applied a proprietary research process called “SENSE” (Sensory Exploration and Need States Evaluation) to identify the key design elements (shapes, colors and materials) that express the Gillette product line identity: masculine, traditional but technologically progressive:

The color blue express the cleanliness of shaving.

Black communicates universality and gutsy, masculine lifestyle.

Silver, with its metallic sheen and industrial presence, reflects the performance aspect of razor blades and sensor.

These are some examples the process behind any brand creation, what I find interesting is that after testing the final product, 95% of the people receives all the messages the way they are intended.

There is plenty of literature on this topic and I have just started to read about it. I will soon start to read The Hidden Sense: Synesthesia in Art and Science by Cretien van Campen. I will post updates on this issue as soon as I find more interesting information about it.

The tool helps you find out and translate keywords into other international markets; it will also show the competitive landscape for that specific keyword, giving you an opportunity chart, search volume, bid suggestions and competitive factor for multiple locations.

One interesting thing is that you can introduce your keywords and filter the results for regions such as Eurpean Union, emerging markets or the “G20” economies group (to name a few). The tool will not only translate the keywords to the languages used in the countries of your search but also it will rank each location by market opportunity volume, suggested bid price, competition for each translated keyword and most importantly, who are my customers overseas?

This is an interesting tool to help preliminary studies like market competition, demand and preliminary costs of advertisement on that new market. Even though it looks to me that this is good for a preliminary study, I personally never trust automatic translation when it comes to put money on. Before starting on a new market I will always have a native speaker that can go through the keywords and make sure things are the way we believe they are (you don’t want to find surprises afterwards).

Translate your website Here is where the Google Translate Web Element fits nicely in order to translate parts of a website. But to make Google happy you should hire a human translator, to facilitate the work, Google has the Translator Toolkit http://translate.google.com/toolkit/list?hl=en#translations/active help the communication.

Translate your ads As a continuation, you can translate your ads, make sure the translated keywords are given the appropriate relevance.

Prepare your business. Here Google advises you to find ways to communicate to your customers in the new market. Having someone speaking the language helps.

Optimize your campaigns. Now, time to monitor your campaigns and learn from the results in order to polish your campaigns.

This is a very interesting movement by Google, thinking big, as usually. Having specialized companies moving towards new markets and supplying with tools to help the first steps before decision makers take the plunge into a risky endeavor.

I also find interesting how all the Google tools bundle together nicely in the Google Global advertiser site as well as how Google helps you find examples of businesses like yours that have gone global using AdWords.

Everyone knows there are differences between art directors and designers, but not many people are able to tell what those differences are. Managers and stakeholders usually say, art directors are expensive and designers cheap, if the designers can get the job done, is it worthy to pay the extra money?

Very human reasoning here, of course. Most of the time the idea is that art directors are basically experienced designers and thats it.

The role of art directors is to give clarity to the designer. To understand the briefing, target group, understand the project as a whole. Is this color appropriate for the clients? or is there because is looks “good” on the design. Do we need a fresh and exciting design for a company with corporate branding? The designers job is to do the work on Illustrator, Photoshop or whatever and the art directors role is to help the designer follow the correct guidelines in order to produce a successful design.

The art director can be a good designer, and even though he/she doesn’t necessarily need to be a good designer, he/she should be knowledgeable of the design principles. Some smaller agencies do not have art directors and do the the art direction with a experienced designer (art direction is a part of the process that can’t be skipped), and some bigger agencies use the art director position as an improvement carrier for experienced designers, therefore turning designers into art directors and shading even more the conceptual difference between both profiles responsibilities.

Good art directors make better designers. They are good listeners and open to accept the designer’s point of view even when the designer comes up with something different than what the art director had in mind (if the design is successful, of course).

I want to have a look at a couple of examples:

First, the DVD cover from the Eternal Sunshine Of The Spotless Mind:

Via www.movieposterdb.com

The art direction here is wrong, misleading. It gives you the feel that you are going to rent a movie that it is not.

This other version, fits better the eerie mood of the movie:

Via IMDB

I wanted to have a look at an example of beautiful design but wrong art direction. This excellent conceptual poster by Ross McCampbell. The Saul Bass style is always attractive and gives the design a very clean and retro feel that definitively doesn't apply to the theme and style of this movie.

Artwork on Flickr by Ross McCampbell

A second example I wanted to show is the NASA logo.

The guys at Logo Design Love don’t like the design of the current NASA logo (who blames them) and they wanted to offer a redesign. If you read the article, you can see that while the design of the original logo is bad, and the redesign is very good (I actually like it a lot), the art direction on the original is good, correct colors and elements and the redesign is not so successful, there are no correct colors or elements, even though it is a much better design, most likely NASA would have never accepted the art direction here.

I could go on but you get the point. A very good article on Art direction and design of Dan Mall can be found at A list Apart.

Everyone that has ever used a browser to access the Internet, knows what a link (more exactly a hiperlink) is:

A hyperlink points to a whole document or to a specific element within a document.

What not everyone knows is that there are different kind of links and there seems to be some confusion when it comes to define some of them. I want to list a few that I find important and give a short definition so that we all know what are we talking about.

Lets start:

Outbound link (also known as hyperlink or link): Is, as the Merriam-Webster dictionary says: “an electronic link providing direct access from one distinctively marked place in a hypertext or hypermedia document to another in the same or a different document”. Or as we said earlier: “A hyperlink points to a whole document or to a specific element within a document.”

Deep linking: Deep linking is making a hyperlink that points to a specific page or image on a website, instead of that website's main or home page.

Inbound link (also known as incoming links, backlinks, inlinks, and inward links) are incoming links to a website or web page. Inbound links are important for SEO (Search engine Optimization) because the number of inbound links is one indication of the popularity or importance of that website or page. Outside of SEO, the inbound links of a webpage may be of significant personal, cultural or marketing interest because it gives you key information to find out who is giving attention to your site.

Broken link (also known as link rot, linkrot, dead link or dangling link):Is a link that points to a webpage or resource that is currently unavailable or out of date giving an error message on the users browser.

Reciprocal links: Is a mutual link between two websites to ensure mutual traffic. This is important for important for SEO, as we have seen earlier because every inbound link adds relevance to your site. Search engines use link popularity algorithms in order to rank websites relevancy, this affects the order a website will show up after the user search for a specific term.

Inline linking (also known as hotlinking, leeching, piggy-backing, direct linking, offsite image grabs) is the use of a linked object, often an image, from one domain A into a web page belonging to a second domain B. The domain B is said to have an inline link to the site where the object is located.

Forum signature linking: Is a technique used to build inbound links to a website via using forum communities that allow outbound hyperlinks in a member's signature. This can be a fast method to build up inbound links to a websiteas well as produce targeted traffic. It is important to know that forums using the nofollow attribute will have no actual SEO value.

Resource Linking: They are hyperlinks to a website or a specific webpage that contains content that supports the statement that is made on that web page, or hiperliks to a quoted text. Lately, resource links have grown in importance because good links count towards a better ranking.

Absolute Authority Links: Absolute authority links are, links that are coming from a domain that is a general authority. At Wiep they subdivide this into two categories. Informational authority links and Navigational authority links.

Relative Authority Links: These are websites that are an authority in their specific area. Even thought they might have a relatively low traffic. If every website in your sector likes to them they are a very good target.

Link checker: Is an online tool to evaluate the page you specify, extract the links from it and test the status of each one. If any errors are found these are reported.

Link shortener: New media social media like Twitter or Facebook, made link shortener bloom. What these tools do is to shorten an otherwise very complex link into a simple one. A link that has 100 characters can be reduced to 15 characters in order to be tweetable (remember the 140 character limit). The advantage to this is that some of these services allows you to personalize the links, add multiple links into one single link or track the stats of the people that click in the link you created (this one is specially important for marketers). Some example are http://bit.ly/http://tiny.cc/http://fon.gs Some services like Pretty Link for Wordpress allows you to creat short links with your domain name.

When working on web projects we often struggle trying to simplify the design, it is not only difficult to simplify things to the minimum but also to convince different stakeholders in order to implement the needed changes to simplify the design. One of the main elements that help simplify the design is the text. Good, clear, to the point copy is the key to simplify your design.

When thinking on simplification, we are always on the risk of falling onto “Occam's Razor”and oversimplify wich is a death trap on usability.

One of the main reasons for a web to get overly complex is the insertion of unnecessary copy, and we can safely remove and edit copy so that we produce a more targeted effect. There are different reasons why a websites copy gets cluttered, the most common and the ones we hear about more often as Paul Boag states:

A fear of missing something – By putting everything online website owners believe they are giving users easy access to everything they need to know. Unfortunately, with so much available, it is hard to find anything.

A fear users will not understand – Whether it is a lack of confidence in their site or their audience, many website managers feel the need to provide endless instructions to users. Unfortunately, users never read this copy.

A desperate desire to convince – Many website managers are desperate to sell their product or communicate their message. Text becomes bloated with sales copy that actually conveys little valuable information.

I have to agree that there is plenty of marginal information on corporate sites. I have found out that a good way to “get rid” of a great deal of this information is to have a corporate Wiki (or any other similar platform). Here you can go as deep as you want and be as explanatory as you want, there will always be some users that will be happy to have this resource, it requires low maintenance and is easy and fast to update.

I believe that this hard marketing language might be use only on specific landing pages to drive traffic more “aggressively” towards specific goals. But the results should always be tested and compared to less aggressive campaigns, in my experience marketing jargon should be kept under control otherwise users distrust the messages and the conversion rates diminishes.

Questions that encourage the use of simplicity in design. also from Paul Boag:

How many people are asking for it? – If only a few people request a piece of functionality, there may not be the demand to justify the time and money.

Who is asking for it? – If it is not being requested by your primary audience then you should probably not be building it.

How will it affect others? – With new functionality comes complexity. Will that functionality confuse some users? Will it distract from your main call to action?

I experienced that there is some layer of users/clients following companies with certain social exposure that find pleasure on seeing “their” suggested changes on the web. It is interesting to witness these sort of behavior, but even though these “hard core followers” can be very useful for certain things, you can’t listen to what they say all the time. If you want to listen to your users you need to do user testing, on a specific environment and with the target group that you are looking for, this is the valuable feedback not from some user that wants his/hers 15 minutes of fame.

There are plenty of stilistic resources to take into account to if you want to produce quality content for your web:

Cut repetition, tautology and unnecessary words

Leave out intensifiers

Use a shorter word or phrase if there is one (start – not commence)

Be short and direct, not long and abstract

Use the passive with caution (of course there are times when only the passive will do, but generally it is longer and less direct)

Eliminate nominalisation of verbs

Use lower case initials wherever possible

Avoid introductory clauses, keep subject and verb near the beginning

Among others...

When you have your copy finalized, you need to be aware that there are certain rules for editing it for the web, this is the visualization of the text:

The bad use of bold text.- Dragging attention to everything is not helping the user scanning. Adequate use of bold on the the regular path of user visual scan can help him/her to extract the key information. Be aware of the F-shaped pattern of reading on a web page; don't brake the users visual flow.

The use of too many different font faces, sizes and colors.- Keep things simple, use always the same font face for reading text and headlines, try to keep the colors on the to a bare minimum, don’t make things hard for those users that actually want to read something on your site.

There are things to be aware of when shortening up your copy, as well as when you want to delete it. There is this new idea of good design that is to eliminate the labels from icons. This can cause confusion and good design can turn out to bad user experience.

My approach is always to simplify the copy by eliminating or editing it. One thing to avoid is trying to “simplify” a website copy by adding more copy, this is of no help and, even thought eliminating or simplifying is not an easy task (specially when you need to keep certain amount of people happy with the changes), it is always worth the time of going the extra mile, put some effort and study on how to do the edits, know your users via user testing preparing different copys on landing pages, user tests will always give you a more realistic understanding of the real problems your users face on your site when reading and achieving the goals you want them to.

I have lately witnessed astonished the back and forth Apple and Adobe have been having about Flash. This whole fight started some six months ago when Steve Jobs stated that Flash is “No Longer Necessary” Here is a long letter from Steve Jobs where he exposes the ideas behind this decision.

I have been developing Flash for a good number of years, and even though I don’t have the same volume of Flash work anymore, this is affecting me, not for the number of requests for Flash design/develop I will be receiving but for the content I have created already. On this regard I am very curious about the new demo that Adobe is making available in order to convert .fla into html 5 sort of content.

What really got me to write this post was something that happened the other day. I have been having this “bug” where my cursor disappears from my Safari browser, it never happened to me with other browsers (but people in forums says that it also happens in Chrome). After a few days suffering this highly annoying issue I took some time to look it up and guess who is the guilty of the bug? Well, Apple claims that is some issue with the flash player, and some Actionscrip will trigger this behavior. From Adobe they claim that the bug is on Mac OS 10.6.4. Well, reinstalling the Flash plugin fixed the issue (so far).

How long is this fight going to be on and on? Why did Apple started this?

There are ways see what is going on:

The reasons Steve gave on the April manifesto are all to it. If this is the case, is fine, but these short of decisions have to be taken slowly, preparing the market for it, wait until this demo is out in order to give people a chance to maneuver and provide their clients with real quality support. I personally think this is actually what happened and is all right, Steve Jobs is free to hate Flash and has the power to change the tendency of its use on the Internet. I just think he is damaging people that have created this content in the first place. This might not even be the best idea for Apple interests, and can backfire at some point. I am very curious on how this whole thing turns out.

The second approach that you can see in some online forums these days is about Apple having a something on the works. They are generating this conflict with Adobe for some reason. This is an interesting concept specially since some people are saying that Apple wants to get in direct competition with Adobe in more fields of the software industry. First thing that comes to mind is Photoshop, the only piece of software that has no competition on the market. This might bring something very positive to everyone (see how much better Lightroom got when Aperture started to gain positions). Competition is going to benefit users, it doesn't matter if you use a Mac or not, you will profit of the improvements of Photoshop for your platform anyway. Also there has been some mysterious meetings between Adobe and Microsoft (this can’t be good).

Well, I really hope this fight is taking us somewhere better to where we are right now. Technologies evolve, the needs of users evolve and we are sometimes a little reticent to drastic changes even when they are for the better. Are they for the better?

Last year, Usability guru Jakob Nielsen, published his expert opinion on an issue that I had been thinking about for a while, the need of password masking.

I, being an advocate of password masking myself found very interesting Jakob Nielsens findings. The password masking is merely a screen protection technique, therefore, when you press enter, the password might be sent as plaintext in HTTP so the password masking wont help much security wise in this case.

Here is the deal, it is true that you need to log into websites when you have potential observers (lets say an airport, a restaurant or similar). In this cases you will feel better if nobody sees what you are typing on the screen (even though, as Jakob Nielsen says, “a truly skilled criminal can simply look at the keyboard and note which keys are being pressed”). As an alternative for users that might need the password masking, he suggests a checkbox so that people can turn on and off whenever is needed. I personally like the checkbox concept too, but not only to drive into security paranoia to some users, but also as a way to help users get used to something new.

Jakob Nielsen talks about password masking as an oppose to the basic usability principles, and that is true, but the problem here is that this has been the norm of any login on the internet so far, being right or wrong is what people are “used to” so we need to “train them” into using something new.

The checkbox idea is a good one and I truly believe it does not add complexity to the form, I would take away the Remember Password checkbox (which is useless most of the times anyway) and visually it wont add anything that will disturb the standard look of a login. I will have the password masking checkbox checked by default so like that you don’t interfere with the user flow and whenever this one gets into trouble he/ she can uncheck the checkbox. As an additional note, I would still use the onkeydown/ onkeypress to check if Caps Lock is on and, if so, display notice (I found it always very useful, not that I ever left the Caps Lock on...).

Jakob Nielsen, also says that he noticed these usability issues with password masking. I personally find the approach from Apple (iPhone, iPad and iPod touch) quite acceptable already which is to unmask the last letter you typed, this is already a good compromise specially since people use these portable devices on the go most of the time. Well done Apple.

As the usability Guru says “Let's clean up the Web's cobwebs and remove stuff that's there only because it's always been there.”