Marie Kuter

La Plateforme du Batiment

Marie — Thu, 29 Mar 2012 12:42:28 +0000

La Plateforme du Batiment is a professional distribution network, dedicated to construction workers and companies. Their new e-commerce website was launched in 2011. It allows easier check-outs and command pick-ups in any delivery point in France, and gives access to the company’s full catalogue, on screen and mobile devices. After the design and the development, I conducted an audit on the website’s usability, making sure the main conversion tunnels were usable and efficient. I based my work on heuristics, and I conducted testings on 5 users. The results of both the audit and the tests were used to identify priority quick fixs, and long-term improvements.

Industry: construction
Objectives: optimization of the conversion tunnels
Delivered: audit, user testing
Copyright: Extrême Sensio, La Plateforme du Batiment
See laplateforme.com

No related posts.

Cours : Construire un site utilisable, bonnes pratiques et outils de l’ergonomie Web

Marie — Tue, 14 Feb 2012 08:16:13 +0000

(in French) Les 26 et 27 janvier 2012, j’ai eu l’opportunité de donner un cours d’ergonomie Web. Je suis intervenue auprès des étudiants de la licence pro Web design au département Services et Réseaux de Communication de l’IUT de Belfort-Montbéliard. Une première expérience de l’enseignement pour moi, que j’ai hâte de renouveler l’année prochaine. Au cours de ces deux journées de travaux dirigés, j’ai présenté aux étudiants certains concepts-clés de l’ergonomie Web, un extrait des bonnes pratiques essentielles et une présentation appliquée des outils de conception. Le but était de sensibiliser ces futurs designers aux problématiques de l’utilisabilité, et de leur donner une base d’outils et de méthodes de travail pour concevoir un site ergonomique.

Plan du cours

Introduction

Pourquoi travailler sur l’ergonomie d’un site ?
Objectifs et organisation du cours
Rapide historique de l’ergonomie
Quelques définitions utiles
Références et inspirations

Théories et concepts

Cette section regroupe certains des concepts-clés de l’ergonomie Web, comme les 7 niveaux de Miller ou les heuristiques de Bastien et Scapin. Les théories sont organisées selon 4 grands postulats plus pratiques.

On lit différemment sur Internet.
Bien ranger aide à trouver facilement
Un site Internet est d’abord un système.
La conception d’un site doit être centrée sur les utilisateurs.

Bonnes pratiques

Le but de cette section est de donner une base de bonnes pratiques que les étudiants peuvent ensuite appliquer dans le cadre de leurs projets. Plutôt que de faire une liste exhaustive, elle se concentre sur 3 grands sujets :

Arborescence et architecture d’information
Navigation
e-commerce

Méthodologie et ateliers

Dans cette partie, on présente les outils et une méthode de travail en ergonomie Web. Arborescence, wireframes, tri de cartes, etc. : comment les utiliser, quel logiciel préférer, les pré-requis et les bénéfices…

Recherche utilisateurs
Arborescence et architecture d’information
Scénarisation
Always be testing!

Les ateliers

Analyse des statistiques Google Analytics
Tri de cartes
Construction d’une arborescence
Construction d’une interface (wireframing)

Résultat des ateliers

Pour appliquer les concepts étudiés, j’avais élaboré plusieurs ateliers pratiques. Les premiers ateliers portaient sur le site de la formation : un sujet que les étudiants connaissent bien, et pour lequel ils se sont impliqués. Nous avons ensuite transmis les conclusions de leur travail —analyse des statistiques Analytics de visite, tri de cartes, benchmark et arborescence— au directeur du département. Les réflexions des étudiants seront utilisées pour inspirer la refonte du site Internet.

La deuxième partie des ateliers était consacrée à un nouveau sujet : les étudiants ont du réaliser le wireframe d’une page produit pour un site e-commerce de vente de vêtements en ligne. Ils se sont facilement projetés dans les deux sujets au choix : une marque de vêtements féminins, plutôt classique, ou une marque de chemises pour hommes, plutôt sportswear. Après un benchmark, en termes de contenus et fonctionnalités, les étudiants ont utilisé un outil en ligne pour le prototypage (l’objectif était de limiter l’apprentissage nécessaire pour l’utilisation du logiciel).

Des mises en commun après chaque atelier ont permis d’identifier de nombreuses bonnes idées et des innovations. Ces exercices ont également permis de valoriser le travail d’équipe et le fait de tester ses propositions, même sur des collègues.

Conclusion

J’ai beaucoup aimé cette expérience, et je dois dire que les étudiants de la licence Pro Webdesign étaient super ! Normalement, on renouvelle l’expérience avec la promotion de l’année prochaine. Le support de cours m’a pris pas mal de temps à développer. Maintenant qu’il est fait, je vais l’étoffer et le diversifier en ajoutant des modules. Je voudrais notamment m’intéresser à l’ergonomie mobile et aux newsletters.

Merci à Xavier Senente, directeur du département, de m’avoir donné cette opportunité. Et merci à tous mes étudiants !

Je serais heureuse de donner également ce cours dans d’autres formations. N’hésitez pas à me contacter si vous êtes intéressé(e).

Site Web à construire ?

Neuromarketing Symposium (12/01)

Marie — Tue, 31 Jan 2012 08:00:27 +0000

On the 12th January, I had the chance to be invited by the student organization Sorbonne Symposium to their symposium on Neuromarketing. Neurosciences play a role in usability, and the symposium specially covered Functional Magnetic resonance imaging. The idea is to use a scanner (as used in a hospital) to measure the effect a website (or an ad, or any kind of stimulus) has on our brain activity. So we can measure (1) which functional zone is activated in our brain, (2) with which intensity, and (3) whether it is positive or a negative effect.

It can look pretty complicated, and as a matter of fact, only a dozen agencies offer this kind of services in the world. But it does present some potential: used with eye-tracking, it is a way to measure what users look at on a Web page, and the effect what they look at has on them.

About eye-tracking, we had the chance to have a speaker from Tobii, and a live demonstration of their device. It was quite impressive, and especially edifying to see how this technology can be used to navigate. For example, I was reading a text on the screen, and the system was automatically scrolling up or down according to the position of my eyes.

For anyone interested in knowing more about functional MRI or eye-tracking, here is a report of the whole symposium (in French only).

©Photo credits Tobii.com

No related posts.

How to crop images in Omnigraffle

Marie — Fri, 02 Dec 2011 17:35:44 +0000

I’ve been using Omnigraffle for a few years now. But I only recently managed to crop images directly in it. It’s definitely useful, as it avoids opening Photoshop and lets you try different alternatives directly on your wireframe. It was quite evident in Visio, but quite hard to find in Omnigraffle, which makes it kind of a secret. Here is a few steps tutorial to learn how to crop images in Omnigraffle.

Step 1: import your image

This part is easy, right? You just drag and drop your image on your wireframe. The image is automatically imported as stretched. You have to change this in order to crop your image.

Step 2: change the status in the inspector

Open the image inspector (Menu / Inspectors / Style / Image). You can see the stretched status is selected. Just click on the Natural size button.

Step 3: crop

From now, you can modify the size of the image within the area (first cursor, point 2) and move the position of the picture in the area (thumbnail, point 1). Here you go! Cropping in Omnigraffle is actually more modifying the size and position of the picture in the area. Quite similar to InDesign in a way. But well, it does the job quite well.

Google Analytics ad

Marie — Sun, 27 Nov 2011 18:00:15 +0000

Why do users abandon shopping carts? This very relevant ad for Google Analytics shows some evidence in an entertaining way. And I like it! Just wonder if your website doesn’t ask too many questions, or complicated data to recover. Everybody has to gain from a simpler buying process.

Footer optimization

Marie — Sat, 27 Aug 2011 18:24:48 +0000

Big or small footer? I recently came to this question regarding an oline news website: is it stil a good thing to offer a big footer, with as many links as possible, and a summary of all keywords? The question remains unanswered speaking about SEO: it seems that multiple links in the footer can even be a bad point for Google, and here’s why:

Search engines seem to devaluate links in the footer.
Links in the footer are often not the first links on a page to a URL, which means they don’t have so much impact.
Users rarely scroll down to the links in the footer.
The more links in a page, the less important each becomes.

I found this article from SEO Moz on footer link optimization very interesting. Randfish also shares examples of good and bad examples. Personnaly, I like Firefox footer:

It offers a reasonable amount of links and information.
The design is nice and attractive, though simple.
I like the social and newsletter features.

Because SEO rules for footer optimization have changed, displaying a footer with thousands links is not worth any longer. The trend is to let go huge and unreadable footers, and work on usable footers. They are not any longer read only by search engines: it is time to think some users might read them.

Workshop: coupdecoeur.qc.ca

AB test duration calculator

Marie — Tue, 19 Jul 2011 13:58:57 +0000

Visual Website Optimizer offers AB and MVT testing services, like Google Website Optimizer, but more complete, if it was possible. I won’t be able to test this service right now, as the price ($49 monthly), though affordable, won’t make me reny Google almighty. But well, maybe, one day… Anyway, Paras Chopra, the founder of this service published a very interesting guide to AB testing in Smashing Magazine. And a very useful free application on the website allows to calculate the duration your AB test should be, according to the traffic and number of combinations. Thanks!

Trying on clothes online: Camaieu

Marie — Wed, 29 Jun 2011 16:55:26 +0000

Buying clothes online can sometimes be a hassle: how to know if this rock fits with this shirt? What is the length of this dress, will it fit me? Well, well, the ultimate solution is of course to get to the shop and try them on. But we’re in the 21st century, after all: wouldn’t there be a solution for our online shopping? Summer is the wedding time, and, how they said in this Indian ad on TV, I am not (at all) ready for it. So I started browsing online clothing shops for a dress. And I was happy to find one of these trying-on-clothes application on Camaieu website. The application is very simple, and accessible for every item in the catalog. Quite impressive: you can actually try every combination possible. Even what does not fit together, just for fun.

What I like about this application:

Very simple to use
Can be used for each and every product of the catalog
No need to set up a character
No need to sign up or give any information: all free
Unlimited possibilites
Standard model
Front and back view

What I would change:

Make the link more visible
Suggest fitting clothes

I did spend the last hour on this application, for finally buying a dress of a different brand in another shop (where I could actually try it on). But well, la dona e mobile, right girls? For me, it wasn’t a trigger for conversion because I was looking for a match with a specific clothe I already had, and the application showed me there was none in this catalog. In this it was useful. And it did improve the idea I had about the brand: I know have the feeling they have helped me in my shopping. Of course, Internet is not everything, but I will be confident when entering a Camaieu shop next time.

iPhone First Aid app: 900 downloads

Remote User Research

Marie — Wed, 29 Jun 2011 16:14:52 +0000

User Research is a whole process to set up, and I guess some agencies or clients often have rather save some time and money than run user testing. As a Usability consultant, I would love to have that time and money, but I also understand planning and budget restrictions. Hopefully, we can benefit from a bunch of free solutions to help us know users better. I am talking about analytics solutions, like Google Analytics (which as well allows A/B and MVT testing, allowing to go pretty far in user research), but also powerful and specific solutions like Survey Gizmo, for online user testing.

Recently, Adviso has set up a user testing process on Optimal Workshop to validate Information Architecture. It is based on tasks, and you can test up to 3 tasks on 10 users with the free plan. (If you like, please give a hand on Adviso’s treejack project. The testing will still be on for a few days.) Optimal Workshop proposes 3 products, and here are the details of what is available for free:

card sorting – 30 cards, 10 users
tree sorting – 3 tasks, 10 users
first click testing – 3 tasks, 10 participants

The 3-products offer is available for 1 999USD for one year, but you can also purchase each product separately. And I think the free offer can already prove very useful for a lot of projects. Thanks Adviso and Thomas for the link: can’t wait to try it on my next projects. Coming soon: I’ll test each product and see how it works. (Fun, isn’t it?)

iPhone First Aid app: 900 downloads

Marie — Wed, 22 Jun 2011 15:41:43 +0000

Quebec Amerique First Aid application for iPhone was the first mobile application I ever worked on. The application was released on the Apple Store a few months ago, and it is considered a success as it has been downloaded more than 900 times since then. This project was a good occasion to start thinking about mobile Usability and information architecture, and build wireframes, use cases, flowchart and scenario. Not bad, for a start, I’d say!