I [SHARE] IT #6

> my selection of indispensable items on the web

• Video : “What the Internet is Doing to Our Brains” > “Most of us are on the Internet on a daily basis and whether we like it or not, the Internet is affecting us. It changes how we think, how we work, and it even changes our brains.”
  .
• chineasy.org > “A visual-based learning system which teaches Chinese characters, simple stories & phrases. Our aim is to bring down the great wall of Chinese language.“

• 15 Amazing Parallax Websites > “One of the hottest Web Design trends in the past couple of years has been the parallax scrolling effect. Parallax scrolling happens when layers are scrolled at different speeds in a simulated parallax motion effect when the cursor is moved.“
  .

• I want it > “at” sign bracelet in white gold and diamond by Overso :

• uqr.me > create dynamic QR Codes for free, with tracking stats : “link your QR code to anything and redirect it anytime you need to“. Now in my TOOLBOX > MOBILE section.
  

• Image converter into WebP format > convert images to the new WebP (“weppy”) image format created by Google, providing “lossless and lossy compression for images on the web” and supporting both transparency and animation. Now in my TOOLBOX > WEBDESIGN section.
  .
• leetchi.com > free online service to collect money from several people for birthday presents, leaving dos, hen/stag parties, etc…  And I love the interface design! – FR

How-to : write effective URLs for your pages

> understanding the stake of URLs in both usability and SEO

Even today I often come upon unclean URLs in websites I browse – you know, the kind of ones that look like this :

amazon.fr/gp/product/2744065161/ref=s9_cartx_gw_d99_g14_ir05?pf_rd_m=A1X6FK5RDHNB96&pf_rd_s=center-3&pf_rd_r=1YTQ7PC7VJJPW08WQYN6&pf_rd_t=101&pf_rd_p=312232987&pf_rd_i=405320
(real example !!)

In order to take good habits right from the start, I offer you an overview of main points to consider when working on building quality URLs in your website projects.

• Definition – the URL basic shape

The acronym ”URL” stands for Uniform (or Universal) Resource Locator (created in 1994 by Tim Berners Lee), the address of a World Wide Web page. The format combines the pre-existing system of domain names (created in 1985) with file path syntax, where slashes are used to separate directory and file names (source Wikipedia).

1. Hypertext Transfer Protocol, the most popular application protocol used on the web.
2. Domain name of the website.
3. Sub-directory of the file.
4. File name of the requested resource.

• When to care about URLs ?

URLs might be considered as soon as possible when building a website project. To refer my recent post about “Pre-production documents checklist for website conception“, URL writing can be made at step #4, defining information architecture.

You website is recent (a few months old), it’s still time to work on better URLs if needed. If your domain is older with strong links, use 301 redirection if you decide to overhaul your pages URLs.

• The issue of separators

Using the right URLs structure is about making them easy to be read, for indexation bots but above all for users. So what is the best choice among the following examples ?

example.com/my-services
example.com/my_services
example.com/myservices

Tests made by SEOs* showed that hyphen (-) is better to use than underscore (_) for separating words inside URLs. In any case, avoid writing strings of several words, it can soon become a real pain to decrypt (words that are connected using underscores is treated by Google as one single word)… : example.com/wouldyoureallysuccedinreadingthiseasily?

* you can listen to SEO guru Matt Cutts on that topic : “Underscores vs. dashes in URLs“.

• Watch for URL depth

Depth is the number of sub-folders we find in a domain. This is usually reflected in the breadcrumbs. The breadcrumbs for a page on a e-commerce site might look like this :

Home > Books > Novels

You might have defined a solid information architecture to allow a clear navigation structure, and so coherent URLs : example.com/books/novels/book-name.html

And of course make sure to limit URL depth (3-4 levels max.) to keep them clean.

• Avoid dynamic URLs

When using a Content Management System (ex. WordPress, Joomla…), URLs can sometimes be generated dynamically, making them look quite unclean : example.com/?p=987fg 

So make sure your CMS offers you URL re-writing options. Indeed static  URLs are much more user-friendly as they contain words instead of meaningless references.

Dynamic URLs can usually be identified by the presence of special characters, such as question marks and ampersands. These characters identify several parameters, often the language or user ID. But this means that the same content can have different URLs, which is definitely bad for both users and search engines !

• What about SEO ?

Don’t think that clean URLs will improve your rankings in 2 weeks – this is never going to happen. But still, you might have noticed that words in URLs can be highlighted in bold when making a search :

Along with title and description tags, keywords contained in URLs can for sure help improve the relevancy of your pages in SERPs. But on the other hand, you must absolutely not fill your URLs with tons of keywords, as this will be considered as spam by Google !

• The benefits of clean URLs

1. Usability > a clean URL allows users to understand what the page will be about in a single glance. When URLs are semantically correct they immediately makes sense for users, and become even more memorable, logical, and easy to type.
.
2. Links > well-written URLs have the possibility of serving as their own anchor text when copied and pasted as links.
.
3. Sustainability > designing clean URLs is a way of “ensuring that individual web resources remain under the same URL for years, which makes the World Wide Web a more stable and useful system” (source Wikipedia).

_____________________________________________________________________________________

In conclusion, using good URL structure is an essential point for your website project, so you must not neglect it : this issue is all about information accuracy, as well as usability.

Remember that if it’s good for users, then it’s good for SEO too !

Organization of content with cards sorting

> design effective information architecture in only 3 steps !

The structure of content is undeniably the very base of a successful website project : indeed this is all about smartly organising information to make it reachable for your users.

This work is what will later help to define the visual aspect of your page – never forget that design depends on content, not the other way around !

As you can see the magic formula is simple :

LIST > SORT > STRUCTURE

Source : Ergolab

…and it’s what will allow you to build great navigation, pages structures with high usability and prioritized items, and so on.

Card sorting can be made internally, that’s to say working on your own if you’re a freelancer like me, or with your team if you have one. But it is generally recommended to include external people in your card sorting work : this allows you to step back from your project, and to get the observations of potential users/customers of your services or products. In other words it’s important to get the opinion of those who will be using your website – what are the expectations, their navigation habits, etc…

What you need :

• cardboard cards (or any pieces of paper)
• a pen
• a few envelops
• a mind-mapping software (mine is XMind, works fine !)
• optional : a bunch of volunteer users

How to proceed :

First is brainstorming time : on each card write down one feature or content you want to appear in your website.

Next on, sort your cards by regrouping them into categories. At this time you can remove or add cards, as well as renaming some to make them more coherent with your sorting. I advise you to place regrouped card in envelops, and to find a name for each group.

In the case of card sorting made with volunteer users, you will have to go through extra steps before getting on the next step :

• Immersion : start with presenting the cards to the user by dispatching them miscellaneously on a table. You can also give context info about your project such as objectives, pricing positioning, etc…
• Validation of contents : ask the user to analyse the names of contents, and why not to find more appropriate ones by renaming them. You can even offer him/her to add contents. During this step you might try to describe and discuss each item with your users.
• Regrouping : let user sort out card by organizing them according to their logic. You can allow him/her to duplicate cards if necessary – if one content can fit several groups. You’ll have to ask question to understand user’s sorting : “why did you put these cards together? how are these cards related to one another?“
• Labeling : ask the user to find name for the groups he/she just made. This is mainly to know why the cards where regrouped that way – it won’t necessarly be the names of the website’s sections.

And when all of this is done, you can launch your mind-mapping tool to start building final website structure :

_____________________________________________________________________________________

Card sorting is essential for a quality user’s experience, as it’s a very good way for defining users routes through your pages according to your objectives and target audience. And you may have noticed this methods is quite cheap to set up, and it will make you easily get user-centered information – so your work is not only based upon ergonomics best practices.

To finish card sorting is a process that might be fully implemented to global project management, as it’s for sure a solid basis for deeply analyzing users needs and demand ! 

Basic online customer life-cycle

> understanding the engagement of your audience

Definition : a customer life-cycle plan is a marketing tool allowing to visualize the successive steps a customer is going to go through during his/her relationship with your brand or business.

This is usually represented as a pyramid diagram to underline a gradual engagement where it’s impossible for a customer to skip steps :

Indeed you’re not going to have the same message about loyalty for someone who doesn’t know your products yet !

Of course you might keep in mind that one category of customers can include several sub-domain of engagement : for ex. a registered user can look for information in order to make a purchase, or can have abandoned his cart because he thinks delivery fees are too high…

It’s important to segment each life-cycle step to get concrete answer for your issues, as well as prioritizing your objectives for each type of customer.