User Centered Design

How do we know ? Map, Path
How do we do ? Button, Cursor
How do we feel ? Hot Media, Cool Media

 "Make what people do frequently, a one step process"

!!Jenifer Tidwell - Designing Interfaces - Actions and Commands
* button groups
* actions panel
* prominent "done" button
* smart menu items
* preview
* progress indicator
* cancelability
* multilevel undo
* command history
* macros

Le problème :
		Sur la future interface de recherche, les effets des différentes options de recherche seront implicites. Cependant, l'utilisateur peut souhaiter vérifier ou comprendre plus en détail les conséquences de ses choix. L'information doit se trouver à un simple click de distance au moment ou l'utilisateur se pose la question. 

	Objectif :
		Création d'une aide en ligne contextuelle.

	Information recherchée :
		Points retenus pour les messages d'aide.
				
	Rôle de K+A :
		Accompagner pour le choix du niveau d'explication à retenir.
		Écrire les messages d'aide.
		Fixer une présentation des textes d'aide.
		Construire les pages HTML à partir des textes fournis par le groupement.
		 										
	Livrables :
		20 pages XHTML avec CSS présentant les textes d'aide ainsi qu'une page d'index général de l'aide.
		Une mise à jour est comprise, dans les 3 mois qui suivent la mise en ligne.

!! About Face 3 
Part I   Understanding Goal Directed Design
* 1. [[Goal Directed Design]]
* 2. Implementation Models and [[Mental Models]]
* 3. Beginners, Experts, and [[Perpetual Intermediates]]
* 4. Understanding Users: [[Qualitative Research]]
* 5. [[Modeling Users: Personas]] and Goals
* 6. The foundation of Design: Scenarios and Requirements
* 7. From Requirements to Design: The Framework
Part II   Designing Behaviour and Form
* 8 Synthesizing Good Design: Principles and Patterns
* 9 [[Platform]] and Posture
* 10 Orchestration and [[Flow]]
* 11 Eliminating [[Excise]]
* 12 Designing Good Behavior
* 13 Metaphors, Idiom and Affordances
* 14 Visual Interface Design
Part III Designing [[Interaction details]]
* 15 [[Searching]] and Finding
* 16 Understanding [[Undo]]
* 17 Rethinking [[Files and Save]]
* 18 Improving [[Data Entry]]
* 19 Pointing, Selecting and [[Direct]] Manipulation
* 20 [[Window]] Behaviors
* 21 [[Controls]]
* 22 [[Menus]]
* 23 [[Toolbars]]
* 24 [[Dialogs]]

*Le problème : Ne pas jeter le bébé avec l'eau du bain. Les solutions en place sont issues de nombreux arbitrages, certains aspects implicites se trouvent fixés sous forme de code. Les interfaces existantes ont traversées l'épreuve du feu: les utilisateurs finals. Il faut réussir à capitaliser sur les points positifs de ces solutions existantes.
*Objectifs : Capitaliser sur l'existant
**Partager une vision commune du projet.
**Capitaliser sur les problèmes déjà résolus d'une part, et s'accorder sur ceux à résoudre d'autre part.
**Dresser une première liste de tâches que la future application doit permettre de réaliser.
**Elargir l'angle d’approche, en prenant connaissance de l’état de l’art dans des organisations comparables.
*Information recherchée :
**Liste de tâches réalisables avec le système existant.
**Solutions existantes pour réaliser ces tâches (dans des applications existantes).
**Liste de tâches utiles mais mais difficilement réalisables avec le système existant.
**Limitations du système existant.
*Rôle K+A :
**Explorer systématiquement l'application existante.
**Consulter des applications comparables
**Enquêter en ligne, par téléphone, par interview auprès des utilisateurs.
**Analyser des statistiques d'utilisation, des feedbacks des utilisateurs,
**Consulter les projets en cours
**Isoler des tâches qu'il seraient utiles de réaliser mais qui sont difficiles avec le système existant.
*Livrables :
**Cartographie de l'existant.
**Cartographie comparative.
**Synthèse écrite.
*Implication attendue du client
**Définir le périmètre de l'analyse : applications, sites, bases de données, (ou à défaut : documentation, cahier des charges).
**Apporter sa connaissance des éléments existants et du contexte (SI, contraintes matérielles...).
**Fournir les statistiques, cahiers des charges et rapports existants
**Proposer des candidats à l'analyse comparative

!! E-commerce checkout usability
*Data input
** Use shipping adress as billing address by default
** Only ask the same information only once
** Indicate required and optional fields 
** Preserve all customer input despite errors in the form
**...
*Copywriting
** Provide additional information when introducing new features
** Avoid contextual words like "Continue..."
** Make it clear when you actually purchase
** Format the "Expiration date" fields as they appear on the credit card
*Layout
**Use clear error indications
**Make guest chekout' a prominent option
**Only use one column for form fields
**Use primary button for the primary action
**...
*Navigation
** Drop down carts should stay visible indefinitely when hovered by mouse
** Process steps should be links
** Clearly show the different steps during check out
** Primary action/input should be above the fold
**Images should clickable
**...
*Flow
** Your check out process should be linear
** Clearly show when extra cost is added to the order
**...
*Focus
** Registration should be optional
** Newsletter should be opt in instead of opt-out
** Don't highlight Coupon excessively
**...

*[[two panel selector]]
*[[canvas plus palette]]
*[[one window drilldown]]
*[[alternative views]]
*[[wizard]]
*[[extras on demand]]
*[[intriguing branches]]
*[[multilevel help]]

! Modèle d'Intéraction
*Browsers : Navigateurs : les commandes sont dans le contenu même 
**one window drill-down (cell phone, finder du système d'exploitation)
**page web : gestion des fenêtres : tiled panes
*Media Players : une fenêtre pour lire les contenus + des commandes indépendantes du contenu 
**navigateur web (IE), 
**lecteur média (DVD)
*messagerie : Two panel selector (ex. e-mail reader)
*Information graphics
***overview + detail
***datatips at the tip of the mouse
***Dynamic queries (ex. effet direct d'un slider)
***data brushing (select in one view show in other simultanuously)
*Immersive games
*Web pages
**home page
**gallery page
**content page
**wiki
**blog see BlogNavigation
**réseaux sociaux - forum..
**E-commerce site
*Document builder
**Text editors éditeur de texte (WORD)
**Graphic Editors éditeur graphique (PHOTOSHOP) : multiple windows (canvas + palettes)
**Spreadsheets tableur (EXCEL)
**calendrier (OUTLOOK)
*Dialogue :
**Formulaires see [[Interface de Formulaire]]
**List builder
*Search interface
*e-commerce transaction :  one-window paging (wizard)

Structuration de types d'articles spécifiques, pour chaque champ d'article une mise en forme pourra être définie au niveau des gabarits.
*Structuration fonctionnelle : titre, sous-titre, image, corps de texte
*Structuration sémantique : ingrédients, temps de cuisson, température du four...pour une recette par exemple. Ce qui demande de bien prévoir les différents types d'articles.
Avec moins de structuration, plus de mise en forme sera fait dans l'outil d'édition HTML.
Avec plus de structuration :
*guide de saisie pour plus de qualité
*permet une mise en forme différente suivant le type d'article (par exemple : un article recette de cuisine pourra être différent d'un article de décoration)
*donner du sens au contenu donnent des possibilités de réutilisation de ces contenus, avec des NavigationElements par exemple
*Est-il possible de créer des relations entre les contenus ? par exemple des contenus de type AUTEUR mis en relation avec des contenus de type OUVRAGE. Cette relation est elle directionnelle ?

Verifier que la déclaration d'un nouveau type fonctionnel peut se faire sans développment informatique.
C'est le cas pour eZ Publish (via l'interface web), Typo3 (module TemplaVoila), Jahia (fichier JSP), mais pas pour Joomla

!! Critères ergonomiques
*1. Guidage
**1.1. Incitation
**1.2. Groupement / Distinction entre Items,
***1.2.1. Groupement / Distinction par la localisation
***1.2.2. Groupement / Distinction par le format
**1.3. Feedback Immédiat
**1.4. Lisibilité
*2. Charge de Travail
**2.1. Brièveté
***2.1.1. Concision
***2.1.2. [[Actions Minimales]]
**2.2. Densité Informationnelle
*3. Contrôle Explicite
**3.1. Actions Explicites
**3.2. [[Contrôle Utilisateur]]
*4. Adaptabilité
**4.1. [[Flexibilité]]
**4.2. Prise en compte de l’[[expérience de l’utilisateur]] 
*5. Gestion des Erreurs
**5.1. Protection contre les Erreurs
**5.2. Qualité des Messages d’Erreurs
**5.3. Correction des Erreurs
*6. Homogénéité / Cohérence : habituation, spatial memory
*7. Signifiance des Codes et Dénominations, 
*8. Compatibilité

! Designing Web Interfaces: 6 Principles
*Make it [[Direct]]
*[[Contextual tools]]
*[[Stay on the page]]
*[[Provide an Invitation]]
*[[Use Transitions]]
*[[React Immediately]]

*Blog Archives can be accessed by:
** Headline (title)
** Subject (tags and/or categories)
** Time (time, day, month, year)
** Author (of post, of comments)
** Format (links, reviews, articles)
** Popularity (incoming links, comments, trackbacks, traffic, ratings)
** Editorial Selection
** Continuum (how an idea develops over time)
*Tags
**Browsing by subject matter (categories) can be enriched through the use of tagging. Due to its flexibility, tagging enables entries to appear within multiple “categories”. Simply assign multiple tags (keywords) to a single blog post and enable visitors to browse blog archives by tags.
**Tags also provide a compelling entry point into archives when surfaced where they are contextually relevant (at the end of a related blog post). Multiple tags in this location are more likely than a single category to provide a path of interest for readers.
**It’s worth noting that a local collection of tags should be actively managed. Because unique tags are so simple to create, it’s relatively easy to end up with a large number of tags that are used only once, which doesn’t help readers find more content. Avoid the common mistake of tagging a posting with almost all of your categories. Be selective.
**An effective way to keep your local tag cloud under control is to display the tags you’ve already utilized on the “create post” page. This list lets you pick from already existing tags and can even be used to pre-fill tag input fields.
*Formats
**Blog posts usually fall into several distinct formats. Some posts are full-fledged articles with substantial content, some are simply pointers (links) to content found elsewhere, some are announcements, some are reviews (of books, movies, events, etc.), and some are compilations of content published in various locations. These formats can be identified with particular tags (announcement, article, review, link, etc,) or a consistent data field that may be used to filter a blog archive down to a specific format of interest. For instance: “I only want to see articles.”
*Continuums
**Blog continuums add a contextually relevant path for readers interested in seeing how a particular idea has continued to evolve. They look forward and see if any posts dated after the current post reference it. These links can then be displayed alongside the referenced post providing direct access to a continuation of an idea.
**A fuller story can be told graphically. Blog continuum sparklines plot the current post a reader is viewing, the previous posts it references, and the later posts that reference it. This paints a picture of where the current post originated (what ideas it draws from), and where it went (how those ideas evolved).
*Comments
**Enhancing the interface design of a blog’s archives enables the author’s content to extend its shelf life and provides compelling content-specific browse experiences for readers. Improving the interactions found within blog comments, on the other hand, enables smoother navigation through the conversations generated by a post and surfaces ideas and content found therein.
*Filters
**Blog comments are a chronologically organized list of author praise, tangential discussions, flame wars, personal anecdotes, link dissemination, points and counterpoints, and valuable additions to the original post’s content. Just like blog archives, however, there’s rarely a good way to separate the signal from the noise.
*In many cases, simply traversing comments chronologically adds a lot of overhead to basic information retrieval. For example, when viewing a technical “how-to” post, readers often scan the comments for corrections, alternative tips and techniques, or pointers to other helpful references. In most cases, they have to explicitly dig these valuable comments out of a vat of irrelevance.
*As a result, it could be quite helpful to filter a long list of comments by:
**Quality (the most useful, insightful, or relevant comments)
** Contains links (pointers to additional reference or related information)
** History (skip what I read last time I visited)
** Favorites (revisit comments I found valuable)
** Format (opinions, questions, modifications, etc.)
*As an example, Boxes & Arrows recently implemented a comment rating system. Direct inline actions enable readers to flag comments as useful (+), not useful (-), and offensive (!). The most useful comments “rise to the top” of the comments list.
*Conversational Flow
**Sometimes the value within comments can’t be made visible through filtering. It exists within back and forth conversations between comment authors and/or the author of the original post. Unfortunately, this discussion is also likely to be interwoven between praise, flame, and tangent so following the conversation can become difficult.
**This challenge is multiplied by a lack of visual assistance. Standard online discussion forums often display conversational threads visually (through indentation). This gives readers a sense of the depth and progression of a discussion. The free-form commenting style on blogs forgoes this structure in an effort to make discussion as simple as possible (there’s no need to consider which thread a new comment belongs to).Though developing threaded visualizations from a set of blog comments would be quite challenging, it may be possible to introduce basic sorting or navigation controls that reveal something about the structure of conversations found within comments. These could include:
***Discussion about a specific portion of the post
***Discussion about a specific comment
***Comments by the author of the post
**As an example. Dunstan Orchard developed a feature that enabled readers to directly reference the specific comments to which they were responding. These relationships were then included in the context of each comment.
**The direct links within the comment allow readers to bypass unrelated content and thereby more accurately follow conversational flow within comments.
**Similarly, comments that quote specific portions of a post, could be referenced within the original post and lead directly to a filtered list of comments.
*Getting the Data
**There’s much to be said about how the archiving and commenting features described here can be implemented both by blog authors and readers. The creation and management of the metadata required to expose valuable content within blog archives and comments is not a trivial task.
**Automated processes can help, but effective classification is often best left to real people. This doesn’t mean the burden needs to fall entirely on a blogger’s shoulders. Metadata creation could be:
*** Entirely author controlled. All decisions about post categories, tags, related links, etc. come from the author. This has the advantage of eliminating malicious rating or tagging and puts the author’s perspective front and center.
***Author initiated and approved, but incorporate reader input through public systems for rating and tagging. Advantages include less work for the author (assuming no spam), and a greater sense of community around the blog if everyone can rate, tag, and categorize for the rest of the blog’s readers to use.
***Purely reader driven, no blog author involvement required.
**Each approach can provide a foundation for the interface design concepts discussed in this article: concepts that get valuable content out of blog archives and comments and into the hands of readers -where they belong.

Gabarits pour définir :
*Quels contenus
*Où sur la page
*Avec quels attributs de mise en forme

Techniques:
*Tags propres au CMS dans le HTML (SPIP)
*Code Java ou Tags d'objets Java dans pages JSP (Jahia) ou pages PHP avec du code PHP (Joomla, eZ Publish)
*Gabarits XSL, qui transforment en HTML des extractions de contenu en XML par XSLT

Card sorting
Names of items to be categorized are printed on individual cards. Cards should be large enough to accommodate the names in a font that participants can read easily when spread out on a desk or table-at least 14 point. Participants are asked to group items in a way that makes sense to them. Participants may also be asked to name the resulting groups.
30' pour 50 cartes
* Ensure that each term is as clear and unambiguous as possible
* Ensure that you have included all the items you need to categorize
* Shuffle or randomize cards prior to each participant session
* Script a set of instructions so that all participants have the same understanding of the process
* Leave participants alone while they are sorting the cards to avoid placing them under unnecessary time pressure, but make sure they can contact you easily to ask questions or when they have finished
* Provide additional blank cards for people to write group names
* Provide rubber bands so that people can gather groups of cards together.

# Open Card Sorting: Participants are given cards showing site content with no pre-established groupings. They are asked to sort cards into groups that they feel are appropriate and then describe each group. Open card sorting is useful as input to information structures in new or existing sites and products.

# Closed Card Sorting: Participants are given cards showing site content with an established initial set of primary groups. Participants are asked to place cards into these pre-established primary groups. Closed card sorting is useful when adding new content to an existing structure, or for gaining additional feedback after an open card sort.

4.3 Card Sorting
Verify the hierarchical structure by conducting
Concept Cards
• Make a list of concepts which should
interviews).
• Each concept corresponds to a chunk
• Around 50–60 concepts are manageable
• Make one notecard for each concept.
• Number each card to better keep track
Open Card Sorting
Open card sorting test:
• Users cluster concept cards into their
themseleves.
• Too few concept cards and you will
• Used in early phases of research.
Closed Card Sorting
Closed card sorting test:
• Users sort concept cards into a predefined category hierarchy.
• At the start, you can ask users what they think each category means.
• Used in later phases of research.
Recipe for Open Card Sorting Test
Thinking aloud usability test with 4 or 5 test users:
• Greeting, consent, demo of thinking aloud, demo of card sorting with small set of demo concepts,
etc.
• Concept cards are scattered on desk in random order, as shown in Figure 4.2.
• User looks through cards to see if any concept is unclear.
• If a user is unsure about what a concept means, the test facilitator first asks what the user thinks it
might mean (for feedback), then explains what was actually intended. See Figure 4.3.
• User then sorts cards into piles or categories (ideally, not too small and not too large) according to
perceived similarity. See Figure 4.4.
• Ask user to name the piles using Post-it notes, as shown in Figure 4.5.
• If there are many fairly small piles, the user should group the piles into larger groups of similar
piles.
• User names the groups of piles using (different coloured) Post-its.
• If a single pile contains many (> 10–12) cards, ask the user to spilt it into subgroups.
• Thinking aloud the whole time (test facilitator should prompt) and recorded on video.
• About 30–40 minutes per user.
• Capture the contents of each pile and group on paper (this user’s two-level hierarchical structure).
• Repeat with 3 to 5 users.
Manual Analysis of Card Sorting Results
• Analyse data by ”eyeballing” (looking through and compiling a final aggregate hierarchy from the
individual users’ suggestions).
• Discover each user’s mental model of information space.
• Come up with aggregate suggestion for two-level hierarchy of information, the way users would
expect to find things organised.
• Also come up with suggestions for naming the groups (menus), but treat these only as suggestions,
which should then be usability tested.
• Translate this into equivalent web site structure.
• Repeat card sorting at higher or lower levels of granularity.
Statistical Analysis of Card Sorting Results
• Web Category Analysis Tool (WebCAT) http://zing.ncsl.nist.gov/WebTools/WebCAT/
overview.html
• IBM EZSort; http://www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/410
• uzCardSort; http://uzilla.mozdev.org/cardsort.html

!!!! Carola Zwick  - Navigation for the Internet and other Digital Media
* What is navigation?
** Orientation in the real world
** Orientation in information space: the book [page numbers invented by Erasmus 16th century ]
** Orientation on the Internet [top level domain > Domain > Sub-domain > sub directory > HTML page or Dynamic query]
** The Browser
** Starting points on the Internet: the Internet Portal
** Cross media references
* [[Navigation through interaction]]
* Archetypes and Stereotypes
** The World Wide Web
** [[Menus, a typology]]
** The screen is always to small
** Site maps
** Buttons
** World wide waiting
* Cognition and Recognition
** You never get a second chance to make a first impression
** Symbols, signposts, instructions and short stories
** Pattern recognition
** Visualisation of information: the map
** Mapping information
* Search engine versus Serendipity
* The Parallel Universe
* Mental Models, Metaphors and Cyberworlds
*  New Frontiers What's next?

*2 stratégie possibles:
**pilotes
**changement général d'un coup
Iterative development opposite to waterfall process :
Fast Iteration Management - Today's best organizations are constantly learning from their designs. Instead of projects taking months or years, they now go from concept to implementation in weeks. Fast iteration management helps us learn to break designs into small, bite-sized implementations and to collect data from each deployment to inform the decisions in the next iteration. Skills include schedule planning, change management, and usage-data collection, to help the team move quickly.

Ex. de Conduite du changement Procter & Gamble :
Site pour le projet du début à la fin
Présente les réponses aux questions que les utilisateurs se posent
Formation en ligne ne donne pas les résultats escomptés.
Au moment du lancement : équipe spécifique de hot line pour ne pas engorger la hot line générale
"Buddy" = parrain pour expliquer ces éléments aux nouveaux venus

how to get people out of their routine and into acting and thinking in new (social) ways? As changing the corporate culture in such a big company is nothing short of impossible, the benefits of the new ways (and tools) have to be so evident and convincing that people start using them out of self interest and thus adapt step by little step (think evolution, not revolution). But also the demonstrated will of the company to re-invent itself was an important factor at BT.

InformationVizualisation
UserInterview

[[Aide en ligne]]
[[Présentation de l'Outil]]

Cutter's rule (library science) : Use the most specific term that applies to assign a subject term to a book.

!! Visual thinking for Design [2008]
*Visual Queries : 
Top to bottom : acts of attention 
Nested loops :  problem solving (ex. mouvement de la tête)  > eye movement > Pattern testing
"The world is its own memory"
*What We Can Easily See
Processed by different interwoven cortex areas :
** color, 
**shape, 
**texture, 
**motion,
**stereoscopic depth 
Biased competition : If we are looking for tomatoes, then it is as if an instruction has been issued.
“ All you red-sensitive cells in V1, you all have permission to shout louder.
All you blue- and green-sensitive cells, try to be quiet. ”

MULTISCALE STRUCTURE TO DESIGN FOR SEARCH
Small features cannot be detected by large brain pixels at the edge of visual space. 
To support efficient visual search, a design should be given large-scale as well as small scale structure.
*Structuring Two Dimensional Space
2.5D SPACE
THE BINDING PROBLEM: FEATURES TO CONTOURS
THE GENERALIZED CONTOUR

Source SMILE: Open Source 

*RightsManagement :
**Où ?, dans quel(s) rubrique du site ?
**Quoi ?, créer, modifier, supprimer, valider, publier...
*HTMLeditor
**Doit savoir prendre en compte la CSS du site
**Insertion de lien doit permettre de sélectionner un des contenus du site
**Insertion d'image permet d'insérer une image de la médiathèque
*ArticleLifeCycle
**Changement des modalités d'affichage suivant le dates : ex. 5 jours en home puis 3 mois dans la rubrique actualité
*CMSTemplates 
*FluxRSS
*SearchEngine
*Gestion des noms des URL

*CMS intégrés (simple à installer) : 
**Joomla
**Spip (balises spécifiques que l'utilisateur doit connaître)
**Typo3
*lack of 
**ArticleStructuration 
**FacetedNavigation
**transversalité de l'information, 
**MultiPositionning of contents
**ValidationWorkflow  

*Enterprise Content Managament
**Jahia
**eZ Publish
*With :
**ArticleStructuration 
**Référentiel des contenus
**ValidationWorkflow 
**Webdav (plusieurs collaborateurs peuvent travailler collaborativement sur les fichiers du serveur distant, comme un répertoire partagé)

**Content inventory for existing content 
**Format
**Size
**Who is in charge

*For gathering requirements, use :
**[[Interviews Utilisateurs]] ou stakeholder par défaut
**Scenarios construit à partir de [[Persona]], voire [[Use Cases]]
**Comparaison de systèmes existants (Benchmark)
* For prioritiser les requirements:

**Always-Visible Tools (Better discoverability)
**Hover-Reveal Tools
**Toogle-Reveal Tools
**Multi-Level Tools (Radial Menu)

Création automatique de liens contextuels par reconnaissance du mot lui même comme sur un WIKI,
* qui va à une, et une seule page définie. Exemple : le nom donne sur la page perso
* ou bien contextuel, le même mot peut conduire à des pages différentes selon le contexte de départ.

[[Alan Cooper]]

!! Imperative controls (to initiate a function)
* Buttons
* Butcons (Button Icon often in toolbar)
* Hyperlinks
!! Selection controls
* Check boxes
* Flip-Flop buttons (like Play / Pause: to avoid)
* Radio buttons
* Combutcons (butcons + arrow)
* List controls (= picklists, list boxes, list views) also Drop-down list control
* Earmarking (list with check boxes)
* Combo boxes (COMBination Of edit Field and list BOXES)
* Tree control
!! Entry controls
** Bounded
*Spinner
*Slider (Dials)
*Thumbwheels
** Unbouded
* Text edit controls
!! Display controls
* Text controls
* Scrollbars
* Splitters
* Drawers (levers)

* Safe exploration 'Let me explore without getting lost or getting into trouble'

/***
|''Name:''|CryptoFunctionsPlugin|
|''Description:''|Support for cryptographic functions|
***/
//{{{
if(!version.extensions.CryptoFunctionsPlugin) {
version.extensions.CryptoFunctionsPlugin = {installed:true};

//--
//-- Crypto functions and associated conversion routines
//--

// Crypto "namespace"
function Crypto() {}

// Convert a string to an array of big-endian 32-bit words
Crypto.strToBe32s = function(str)
{
	var be = Array();
	var len = Math.floor(str.length/4);
	var i, j;
	for(i=0, j=0; i<len; i++, j+=4) {
		be[i] = ((str.charCodeAt(j)&0xff) << 24)|((str.charCodeAt(j+1)&0xff) << 16)|((str.charCodeAt(j+2)&0xff) << 8)|(str.charCodeAt(j+3)&0xff);
	}
	while (j<str.length) {
		be[j>>2] |= (str.charCodeAt(j)&0xff)<<(24-(j*8)%32);
		j++;
	}
	return be;
};

// Convert an array of big-endian 32-bit words to a string
Crypto.be32sToStr = function(be)
{
	var str = "";
	for(var i=0;i<be.length*32;i+=8)
		str += String.fromCharCode((be[i>>5]>>>(24-i%32)) & 0xff);
	return str;
};

// Convert an array of big-endian 32-bit words to a hex string
Crypto.be32sToHex = function(be)
{
	var hex = "0123456789ABCDEF";
	var str = "";
	for(var i=0;i<be.length*4;i++)
		str += hex.charAt((be[i>>2]>>((3-i%4)*8+4))&0xF) + hex.charAt((be[i>>2]>>((3-i%4)*8))&0xF);
	return str;
};

// Return, in hex, the SHA-1 hash of a string
Crypto.hexSha1Str = function(str)
{
	return Crypto.be32sToHex(Crypto.sha1Str(str));
};

// Return the SHA-1 hash of a string
Crypto.sha1Str = function(str)
{
	return Crypto.sha1(Crypto.strToBe32s(str),str.length);
};

// Calculate the SHA-1 hash of an array of blen bytes of big-endian 32-bit words
Crypto.sha1 = function(x,blen)
{
	// Add 32-bit integers, wrapping at 32 bits
	add32 = function(a,b)
	{
		var lsw = (a&0xFFFF)+(b&0xFFFF);
		var msw = (a>>16)+(b>>16)+(lsw>>16);
		return (msw<<16)|(lsw&0xFFFF);
	};
	// Add five 32-bit integers, wrapping at 32 bits
	add32x5 = function(a,b,c,d,e)
	{
		var lsw = (a&0xFFFF)+(b&0xFFFF)+(c&0xFFFF)+(d&0xFFFF)+(e&0xFFFF);
		var msw = (a>>16)+(b>>16)+(c>>16)+(d>>16)+(e>>16)+(lsw>>16);
		return (msw<<16)|(lsw&0xFFFF);
	};
	// Bitwise rotate left a 32-bit integer by 1 bit
	rol32 = function(n)
	{
		return (n>>>31)|(n<<1);
	};

	var len = blen*8;
	// Append padding so length in bits is 448 mod 512
	x[len>>5] |= 0x80 << (24-len%32);
	// Append length
	x[((len+64>>9)<<4)+15] = len;
	var w = Array(80);

	var k1 = 0x5A827999;
	var k2 = 0x6ED9EBA1;
	var k3 = 0x8F1BBCDC;
	var k4 = 0xCA62C1D6;

	var h0 = 0x67452301;
	var h1 = 0xEFCDAB89;
	var h2 = 0x98BADCFE;
	var h3 = 0x10325476;
	var h4 = 0xC3D2E1F0;

	for(var i=0;i<x.length;i+=16) {
		var j,t;
		var a = h0;
		var b = h1;
		var c = h2;
		var d = h3;
		var e = h4;
		for(j = 0;j<16;j++) {
			w[j] = x[i+j];
			t = add32x5(e,(a>>>27)|(a<<5),d^(b&(c^d)),w[j],k1);
			e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
		}
		for(j=16;j<20;j++) {
			w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
			t = add32x5(e,(a>>>27)|(a<<5),d^(b&(c^d)),w[j],k1);
			e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
		}
		for(j=20;j<40;j++) {
			w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
			t = add32x5(e,(a>>>27)|(a<<5),b^c^d,w[j],k2);
			e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
		}
		for(j=40;j<60;j++) {
			w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
			t = add32x5(e,(a>>>27)|(a<<5),(b&c)|(d&(b|c)),w[j],k3);
			e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
		}
		for(j=60;j<80;j++) {
			w[j] = rol32(w[j-3]^w[j-8]^w[j-14]^w[j-16]);
			t = add32x5(e,(a>>>27)|(a<<5),b^c^d,w[j],k4);
			e=d; d=c; c=(b>>>2)|(b<<30); b=a; a = t;
		}

		h0 = add32(h0,a);
		h1 = add32(h1,b);
		h2 = add32(h2,c);
		h3 = add32(h3,d);
		h4 = add32(h4,e);
	}
	return Array(h0,h1,h2,h3,h4);
};


}
//}}}

!! Designing for Interaction
!!! Chap. 1 What is Interaction Design?
* A brief history of Interaction Design
* A stew of disciplines
!!! Chap. 2 The four Approaches to Interaction Design
* User Centered Design
* Activity Centered Design
* Systems Design
* Genius Design
!!! Chap. 3 Design Strategies
* Framing the problem
** Traditional research
** Design Brief
** Stakeholders interviews
** Metrics and ROI
** Competitive analysis
* Determining Differentiators
* Visualization and Visioning
* Project Planning and Roadmapping
!!! Chap. 4 Design Research
ex. Interviews
!!! Chap. 5 Structured Findings
ex. Personas
!!! Chap. 6 Ideation and Design Principles
ex. Brainstorming
!!! Chap. 7 Refinement
* Constraints
* The Laws and Principles of Interaction Design
* Frameworks
* Documentation and Methods Of Refinement
!!! Chap. 8 Prototyping, Testing, and Development
!!! Chap. 9 The Future of Interaction Design
!!! Chap. 10 Designing for Good

!!! Transitional Volatility in Web Navigation
* Navigation cycle
** Habituation
** Prediction
** Reorientation
* Experiment with change in navigation within site
** full overview version (worst)
** partial overview version
** local context version (optimal, showing movement and progress)

[[Jesse James Garrett]]

/***
|''Name:''|DeprecatedFunctionsPlugin|
|''Description:''|Support for deprecated functions removed from core|
***/
//{{{
if(!version.extensions.DeprecatedFunctionsPlugin) {
version.extensions.DeprecatedFunctionsPlugin = {installed:true};

//--
//-- Deprecated code
//--

// @Deprecated: Use createElementAndWikify and this.termRegExp instead
config.formatterHelpers.charFormatHelper = function(w)
{
	w.subWikify(createTiddlyElement(w.output,this.element),this.terminator);
};

// @Deprecated: Use enclosedTextHelper and this.lookaheadRegExp instead
config.formatterHelpers.monospacedByLineHelper = function(w)
{
	var lookaheadRegExp = new RegExp(this.lookahead,"mg");
	lookaheadRegExp.lastIndex = w.matchStart;
	var lookaheadMatch = lookaheadRegExp.exec(w.source);
	if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
		var text = lookaheadMatch[1];
		if(config.browser.isIE)
			text = text.replace(/\n/g,"\r");
		createTiddlyElement(w.output,"pre",null,null,text);
		w.nextMatch = lookaheadRegExp.lastIndex;
	}
};

// @Deprecated: Use <br> or <br /> instead of <<br>>
config.macros.br = {};
config.macros.br.handler = function(place)
{
	createTiddlyElement(place,"br");
};

// Find an entry in an array. Returns the array index or null
// @Deprecated: Use indexOf instead
Array.prototype.find = function(item)
{
	var i = this.indexOf(item);
	return i == -1 ? null : i;
};

// Load a tiddler from an HTML DIV. The caller should make sure to later call Tiddler.changed()
// @Deprecated: Use store.getLoader().internalizeTiddler instead
Tiddler.prototype.loadFromDiv = function(divRef,title)
{
	return store.getLoader().internalizeTiddler(store,this,title,divRef);
};

// Format the text for storage in an HTML DIV
// @Deprecated Use store.getSaver().externalizeTiddler instead.
Tiddler.prototype.saveToDiv = function()
{
	return store.getSaver().externalizeTiddler(store,this);
};

// @Deprecated: Use store.allTiddlersAsHtml() instead
function allTiddlersAsHtml()
{
	return store.allTiddlersAsHtml();
}

// @Deprecated: Use refreshPageTemplate instead
function applyPageTemplate(title)
{
	refreshPageTemplate(title);
}

// @Deprecated: Use story.displayTiddlers instead
function displayTiddlers(srcElement,titles,template,unused1,unused2,animate,unused3)
{
	story.displayTiddlers(srcElement,titles,template,animate);
}

// @Deprecated: Use story.displayTiddler instead
function displayTiddler(srcElement,title,template,unused1,unused2,animate,unused3)
{
	story.displayTiddler(srcElement,title,template,animate);
}

// @Deprecated: Use functions on right hand side directly instead
var createTiddlerPopup = Popup.create;
var scrollToTiddlerPopup = Popup.show;
var hideTiddlerPopup = Popup.remove;

// @Deprecated: Use right hand side directly instead
var regexpBackSlashEn = new RegExp("\\\\n","mg");
var regexpBackSlash = new RegExp("\\\\","mg");
var regexpBackSlashEss = new RegExp("\\\\s","mg");
var regexpNewLine = new RegExp("\n","mg");
var regexpCarriageReturn = new RegExp("\r","mg");

}
//}}}

!! [[James Kalbach]] - Designing Web [[Navigation]] 
* User centered
* Designer centered
* Enterprise centered
* Content centered
* Technology centered

[[Alan Cooper]]

"Put primary action in the primary window"
Dialogs are appropriate for organizing controls and information about a single domain object or application function"

* Property 
"Use object names in property dialog title bars"
* Function 
"Dialogs are appropriate for functions that are out of the main interaction flow"
"Use verbs in function dialog title bar"
* Process 
"Inform the user when the application is unresponsive"
** time consuming process is happening
** things are completely normal (papers flying from one folder to another)
** how much more time the process will take
** a way to cancel

* Bulletin : to avoid with Rich Modeless (Visual or positive Audible) Feedbacks
** Transitory bulletin (never to use)
** Blocking bulletin
*** Error : to avoid, making it impossible for users to make errors with , or making smarter application. Otherwise: polite & show default solution and alternatives (with drawbacks).
*** Alert
*** Confirmation : Do, don't ask - but make all actions reversible

* Modal dialog box
* Modeless dialog box
"Visually differenciate modeless dialogs from modal dialogs"
"Use consistant terminating commands for modeless dialog boxes"
*Transform it into a:
** Docking toolbar
** Floating palette
** Side bar (task pane)
* Managing content in Dialog Boxes
** Tabbed Dialogs
** Expanding dialogs
** Cascading dialogs

!!! Modes of Information Seeking - Boxes and Arrows
* Known item search
** search
** A-Z index
** Quick links
** Browsing
* Exploratory seeking - not able to properly formulate queries
** Browsing
** Related information
** Search
* 'Don't know what you need to know' - ex. Flipping through a magazine.
* Re-finding
** Wishlists
** Seen before
** Favorites
**A "precedent" search is a search for a model document. Generally, the key to finding a good precedent is knowing the context in which a document was previously used, rather than text in the document itself.

!! [[Jacques Bertin]] - Sémiologie graphique
* La graphique
** La graphique est un système monosèmique : la siginification de chaque signe précède l'observation de l'assemblage des signes, comme en mathématiques, mais il est fondé sur la vue. 
** Le travail de signification a lieu entre les signes (et non pas entre le signe et sa signification comme pour un tableau artisitique par exemple).

!! The Visual display of quantitative information
*Micro/Macro Reading
** To clarify, add details. Simplessness of data is NOT equal to clarity of reading.
** Back to back steam and leaf plot : If we are to add a mark, it may as well be a meaningfull one: a digit.
* Layering and Separation
** 1+1= 3 or more [[Josef Albers]]
** The noise of 1+1= 3 is directly proportional to the contrast in value between figure and ground.
** Information consists of differences that make a difference.
* Small Multiples
** Comparison must be enforced within the scop of the eyespan
* Color and Information 
** "Pure, bright or very strong colors have loud, unbearable effects when used when they stand unrelieved other large areas adjacent to each other, but extraordinary effects can be achieved when they are used sparingly on or between dull background tones." [[Eduard Imhof]] in Kartographische Geländedarstellung
** "Hue, Saturation, Value" [[Munsell]]
** "Any ground substracts its own hue from colors which it carries and therefore influences" [[Josef Albers]] in Interaction of Colors.
** Mutual interplay of color and contour. Presence of an edge, a thin line of color not too distant in value. Visualy shifting color within the outlined form. Human cognitive processing gives considerable and sometime decisive weight to the contour information [[David Marr]] in Vision

!!!! Recognizing Digital Genre
*Comparing information genre and shape (ex. telephone book, dictionnary,...)
** Full version
** Content only version
** Form only version (recognized twice as fast as Content only)

!!Cognitive Psychology 
#ExtracTion 
#InterpretaTion
#MémorisaTion
#ExploitaTion 
#[[Factors that affect user behavior]]



*[[3 how do we questions]]

!!! [[Alan Cooper]] - About Face 3
* Preparing for Ethnographic interviews
** Identifying candidates
*** The persona hypothesis
*** Roles in business and consumer domains
*** Behavioral and demographic variables
*** Domain expertise versus technical expertise
*** Environmental considerations
** Putting a plan together [ 5 to 6 interviews per presumed behavioral pattern minus overlapps]
* Conducting Ethnographic interviews
** Interview team and timing
** Phases of ethnographic interviews
*** Early interviews. Broad open ended questions.
*** Middle interviews
*** Later interviews. Tying up loose end in the data.
** Basic methods
*** Interview where interaction happens
*** Avoid a fix set of questions. The interviewer don't know enough about the domain to presuppose the questions that need asking. But have a list of topics and [[Types of Questions]] in mind.
*** Focus on goals first, tasks second
*** Avoid making the user a designer
*** Encourage storytelling
*** Ask for show and tell
*** Avoid leading questions
** After the interview

!! Alan Cooper - About Face 3 
* Stopping the Proceedings
* Common Excise Traps
* Navigation is Excise
** Among multiple pages
** between panes
** between tools and menus
** of information
*** scrolling
*** linking
*** Zooming and panning
* Improving Navigation
** Reduce the number of places to go
** Provide signposts
*** Menus
*** Toolbar
** Provide overviews
** Provide appropriate mapping of controls to functions
** Inflect your interface to match user needs
** Avoid hierarchies

Prise de décision et action
*Comme le Coût cognitif d'interprétation du Categorical decision making is more time consuming then simple visual search : 
**TreeStructure :Limiter la profondeur du site = Scrolls are better than short pages UIE [1998a]
** RédacTion : utiliser un vocabulaire compréhensible. Pour un énoncé, plus l'effort cognitif d'interprétation est important, moins l'enoncé est pertinent 

Nouveauté informationelles : éviter les redondances mais proposer des liens contextuels

Perception visuelle fine : Confort de Proximité
Le sujet a plus de chances de percevoir un élément nouveau si celui-ci se trouve dans son champ visuel. L'angle de perception visuelle fine est de 2.5 degrés, celui de perception périphérique est de 60 degrés (Wickens, 1987). Il est important de minimiser la distance que doit parcourir l'oeil entre différent points de lecture (Wickens, 1987). C'est sur ce principe que repose la conception d'un cockpit. Malheureusement, comme c'est souvent la cas dans ce domaine, le principe inverse est également vrai: la proximité de plusieurs informations visuelles peut également avoir un effet distracteur (Wickens, 1987)

Physiologie de la vision périphérique :
Les animations sont perçues par la vision périphérique, ce qui provoque une fatigue oculaire.
Les contrastes sont perçus par la vision périphérique, ce qui permet l'accès tabulaire à l'information.

Voir aussi [[Visual Design]]

!!! John Ferrara about Search
##Domain expertise
***When searching outside a domain of expertise, people will be less certain where to start, use less precise language, and have more difficulty evaluating search results.
##Search experience
***If you know how to use Boolean operators, exact strings, filtering controls, and have proven strategies for exploiting search, then you have a much richer toolset at your disposal.
##Cognitive style
*** Global thinkers first try to build a broad level of understanding across related topics.
*** Analytical thinkers dive right into a single topic and research it thoroughly to resolve a specific problem.
##Goal type
***Navigational searches are efforts to reach a particular location, such as an intranet’s timesheet application.
*** Informational searches seek out any documents relating to a topic, like a description of employee benefits.
*** Transactional searches occur when the user primarily wants to accomplish something online, like changing her benefits elections.
##Mode of seeking
***The extent to which users understand what they are trying to find determines their mode of seeking. The level of understanding can range from known items, where people know exactly what they need and how to describe it, to much more exploratory searches, where they have only a loose concept what they want to find.
##Situational idiosyncrasies
***search behavior can vary for the same user with the same task, due to idiosyncrasies in external pressures, working context, temperament, or mood.

* Changes in midstream 'I changed my mind about what I was doing'
* Deferred choices 'I don't want to answer that now; just let me finish'

!! [[Alan Copper]] - About Face 3
Flow described as 'a condition of deep, nearly meditative involvement' by Tom DeMarco (or [[Csikszentmihalyi]] ?)
* Follow user's mental model
* Less is more
* Enable users to direct, don't force them to discuss
* Keep tools close at hand
* Provide modeless feedback
* Design for the probable; provide for the possible
* Reflect object and application status
* Avoid unnecessary reporting
* Avoid blank slates
* Differentiate between command and configuration
* Provide choices
* Hide the ejector seat levers
* Optimize for responsiveness; accomodate latency

by David Malouf

Definition of Interaction Design (IxD) : Somehow, products, services, and systems need to respond to stimuli created by human beings. Those responses need to be meaningful, clearly communicated, and, in many ways, provoke a persuasive and semi-predictable response. They need to behave.
It’s also important to note that Interaction Design is distinct from the other design disciplines. It’s not Information Architecture, Industrial Design, or even User Experience Design. It also isn’t user interface design. Interaction design is not about form or even structure, but is more ephemeral—about why and when rather than about what and how.
I’m not the only person ever to think about this issue though I propose that we think about it differently. Dan Saffer, for example, in his book, “Designing for Interactions”[5] has a great chapter on what he calls the Elements of Interaction Design: Time, Motion, Space, Appearance, and Texture & Sound. Dan’s elements concentrate on what I would call the forms that carry interactions, but to me they are not the form of an interaction, except maybe time.
If there are indeed foundations of Interaction Design, they need to be abstracted from form completely and thus not have physical attributes at all.
!!!Foundations of Interaction Design
!!!!Time
“Time” makes interaction design different from the other disciplines of user experience (UX). It is the wrapper of our experience of an interaction and must live over time.
But Time is not a single foundation in Interaction Design. There are too many interrelated facets of time to be manipulated. And as we all learned Time is relative; it is fungible; and exists on many axis all at the same moment. Let us consider three time related foundations of Interaction Design:
!!!Pace
Interaction design is the creation of a narrative—one that changes with each individual experience with it, but still within constraints. For example, if I’m using an email client, I’m not going to turn on a stove burner during the process of writing an email.
Narratives have pacing. We experience that most clearly when we watch a movie. A great movie will have you coming out of a theater having never looked at your watch. Pace is also a part of interaction design, but in some cases a good experience may have you looking at your watch—hopefully not out of boredom, but because you need to know the current time so you can complete the goals of the interaction.
The way I think of pace in interaction design often correlates to how much can I do with any given moment. And not just how much can I do, but how much I have to do before moving to the next moment. For example, I can have a single really long form where all of my checkout information is presented in one presentation when I’m buying something, or I can separate different components of the checkout process into more discreet moments.
While it might take the same length of time to complete either experience because the number of form fields is the same, the experience of the pacing of these designs is quite different. Further, it has been argued that one long form is more efficient, and conversely that separating a form into chunks is more manageable. Maybe that means that the total positive experience needs to consider other things beyond efficiency for its own sake.
!!!Reaction
A simpler way that we design for time in interaction design is “reaction time.” How long does it take for the system to produce a reaction to an event? We’ve all seen our cursor change to an hourglass or the proverbial progress bars as we wait for the system to do what we asked, but there are other reaction time considerations.
Actions done in real time (synchronous) have a level of relationship to the moment, while actions that seem to happen in a black box and come back later (asynchronous) lack that relationship. However, because some systems take time, we need to be cognizant of how we communicate these different types of reactions.
!!!Context
Every major foundation element like time should probably have a “context” sub-element. What this means is that there is always something about the human being in the interaction that would change the course of the design itself. In the case of “time,” we cannot design any application without understanding and exploring the meaning of how much time a human will be spending in direct contact with the system.
How much time we spend with an application and how long we are in relationship to it inform our designs and also participate in the experience we create.
Alan Cooper & Robert Reimann in About Face 2.06 speak about the context of time as the concept of “posture.” There are four postures: * Sovereign – an application that takes our full attention. * Transient – applications in the periphery of our attention that call us for short moments. * Daemonic – alerting systems * Parasitic – support interaction mode for both sovereign and transient applications.
!!!Metaphor
Metaphor is a literary device which uses one well-understood object or concept to represent with qualification another concept which would be much more difficult to explain otherwise. The virtual nature of computers requires that we bring tangible metaphors to bear to help people understand the vagueness of it all. What type and how many metaphors we use directly impact the quality and emotional connection we have for a product.
A favorite metaphor is the trash can or recycle-bin (pick your OS). The idea your files are in waiting in some virtual “bin” or “can” so that if you were mistaken you can dig through the trash(Ick!) and recover them is ingenious. Of course, you can always “empty” it, making whatever was inside irrecoverable. The metaphor works well for most people mainly because of its preciseness and flexibility with the real. In thinking about the qualities of the metaphors for a bin/can between Mac OS and Windows, one might wonder if the nature of a trash can’s “dirtiness” makes it less likely that we will dig files out than recover files from the recycle-bin.
All metaphors break down at some point; where these metaphors break is how we get things into them. We still use the term “delete” to express how we add something to that bin or can. We don’t delete things into our real trash cans, do we? Despite the break down of the metaphor (and every computer metaphor does break down at some point), it still is tangible enough for us to grasp.
But sometimes metaphors go too far. They require a chasm wider than our ability to imagination. The literal desktop seems to make sense and has been tried in the past. If I have a blotter, a file cabinet, an inbox, a calendar, etc. laid out quite beautifully on my screen, I can call my objects files, use a notepad, keep my messages in an inbox, and keep appointments on a calendar, right?
But metaphors appear to succeed best when they are imprecise and the user has to fill in the gaps from their own understanding. Thus, we have an adaptation of that desktop metaphor on our computers today.
The interaction designer needs to strike this balance, cautiously using the metaphors of their predecessors and building on top of them, so long as the original (maybe convention-setting) metaphor can withstand the new direction.
!!!Abstraction
Working in tandem with metaphor, Abstraction relates more to the physical and mental activity that is necessary for an interaction to take place. I first started thinking about abstraction after reading an article by Jonas Lowgren7 on what he has termed “Pliability.” After reading the article and using the term a few times in talks and discussions, it occurred to me that Jonas was really speaking about how abstracted an interface is from the response of the product.
By most accounts almost everything on a PC is pretty abstracted because you have two primary interface points for input—mouse and keyboard. Some people have placed their monitor inside of some sort of touch device lowering the level of abstraction for some types of interactions, mainly drawing. Still, most of us type, point, click, and move the mouse around on the screen.
Let us focus on “mousing”. We are looking at a monitor where there is a cursor (an icon) we were taught is related to the mouse. Without looking at that mouse (usually) we move it and in whatever direction we move the mouse, the icon on the screen (usually an arrow) moves. Well, sorta. Right and left seem to work, but moving a mouse away from us moves the cursor up and moving it towards us moves the cursor down playing on the metaphor of perspective possibly.
Then when we get the icon over a target, we click a button on the mouse. This is a strong level of abstraction. The mouse, monitor, and CPU work in unison to create a series of effects that communicate to the connection between the three devices. But the connection is very very abstract and must be learned.
Even in moused behaviors there are different levels of abstraction as well. My favorite comparison is between Google Maps and MapQuest. What makes Google Maps a success is that by mousing down and moving my arm I can change the focused area of the map. It has a very quick reaction time (see above), but the type of motion—moving my arm as if moving a piece of paper in my focused line of sight—is much less abstracted than in MapQuest, which is to simply click on the border or on the map (assuming the correct mode is set). Now one might say that the click is easier (a less complex set of behaviors), but this is more abstracted, arguably less engaging, and definitely less accurate. This makes Google Maps (and copycats) a much more pleasing and effective interaction.
Systems are both becoming highly complex and highly integrated into our lives. Many systems are losing abstraction completely, and not always for the better, while complexity is increasing abstraction of information. This is why everyone is so fascinated with touch-screens of late. They quickly reduce the level of abstraction for interacting with a computer device.
Other new and popular technologies will create challenges for the next wave of interact designers.. The expanding world of spatial gestures, RFID, and other near-field communications technologies create interaction experiences basically increase abstraction without any device to interface with directly. For these, we have not found similarly effective metaphors to guide the user’s understanding of the abstraction as we have for the mouse.
!!!Negative space
All good design disciplines have a form of negative space. In Architecture and Industrial Design, it is the hollowness or the space between solids. In Graphic Design, it is “white space” what is left without color, line, or form—literally the white part of the paper to be printed on. Sound design uses silence, and lighting design looks at darkness.
So what is the negative of interaction?
There are many places where you can “lack” something, or, more accurately, there are many layers. Are we only talking about the product action? What about our action? What about the space in between either entity’s action?
Pause – So clearly a moment in time where no action is taking place by anything that is part of the interaction experience. Often in interaction design we try to fill these gaps, but maybe these gaps are useful.
Cessation of thought – What if doing nothing created a reaction from the system? Well, one student thought this up with BrainBall (http://w3.tii.se/en/index.asp?page=more&id=4) at Sweden’s Interaction Institute (http://w3.tii.se/en/). As you think less, the ball moves more.
Inactivity – Doing nothing, or the product doing nothing in reaction to an action may be a negative occurrence. This differs from pause, but in this case inactivity is the reaction to activity as opposed to just a cessation of activity.
Well, whatever the negative space of interaction design is, it isn’t.
!!!Intersection in Interaction
Unlike form-creating design disciplines, interaction design is very intricate in that it requires other design disciplines in order to communicate its whole. For that reason, interaction design is more akin to choreography8 or film making than music or costume making. The foundational elements above only belong to interaction design, or are re-defined to be explicitly for interaction design.
For example, the use of color is an aesthetic tool and a functional tool that can enhance or detract from communication of core interaction styles. Language or semiotics as tools for communicating through another discipline called narrative or story telling also come together and make for a better interaction experience. Further, for many experiences, information architecture is required for the preparation and arrangement of information before the interaction can be created.
As Dan Saffer points out (see above), motion, sound, appearance, texture, and sound all make up the form and are used to create patterns of time, abstraction and metaphor.
It is the interaction designer’s attempt to manipulate these four foundations that separates the practice from industrial design, architecture, graphic design, fashion design, interior design, information architecture, and communication design.
In the end, interaction design is the choreography and orchestration of these form-based design disciplines to create that holistic narrative between human(s) and the products and systems around us.

*For gathering requirements, use :
**[[Interviews Utilisateurs]] ou stakeholder par défaut
**[[Scenarios Utilisateur]] construit à partir de [[Persona]], voire [[Use Cases]]
**Comparaison de systèmes existants (Benchmark) [[Analyse de l'Existant]]
* For prioritiser les requirements:
**Faisabilité technique

*looking at Task before functionnalities,
Pour s'accorder sur les termes, nous appelons ici "tâches" des objectifs que les utilisateurs souhaitent réaliser. Ces tâches peuvent être décrites par des données d'entrée, des opérations logiques et de résultats en sortie. Elles peuvent être aisément décrites par un texte écrit, sans illustration. Elles ne sont pas nécessairement réalisées par informatique. Un exemple de tâche peut être : "Retrouver des copies des courriers envoyés par la X à Y en janvier 2005 et portant sur le sujet Z". A l'inverse, les "fonctionnalités" sont des éléments de l'interface qui permettent à l'utilisateur de réaliser une tâche : elles se décrivent plus facilement par diagramme que par texte. Un exemple de fonctionnalité peut être une association de filtres de recherche sous forme de menus déroulants sur un écran de recherche.

Face à ensemble de stimuli, nous percevons la bonne forme de préférence à d'autres.
simple, symétrique, continue,
regroupement par proximité, similitude, destin commun, clôture.
Koffka, K. (1935) Principles of Gestalt Psychology

Le tout est plus que la somme des parties. Face à ensemble de stimuli, nous percevons certains 'patterns' de préférence à d'autres. Certains de ces biais semblent universels. En créant des invariants dans la présentation des informations, l'auteur favorisera l'induction de patterns visuels qui accéléreront l'interprétation des écrans ultérieurs. Si l'auteur prend la précaution d'afficher systématiquement le même type d'informations au même endroit, l'utilisateur pourra construire des automatismes lui permettant de fixer directement le point de l'écran où se trouve l'information recherchée. C'est un principe général en psychologie: la création d'automatismes permet de réduire les ressources attentionnelles nécessaires.

La loi de la bonne forme : loi principale dont les autres découlent : un ensemble de parties informe (comme des groupement aléatoire de points) tend à être perçu d'abord (automatiquement) comme une forme, cette forme se veut simple, symétrique, stable, en somme une bonne forme.

La loi de bonne continuité : des points rapprochés tendent à représenter des formes lorsqu'ils sont perçus, nous les percevons d'abord dans une continuité, comme des prolongements les uns par rapport aux autres.

La loi de la proximité : nous regroupons les points d'abord les plus proches les uns des autres.

La loi de similitude : si la distance ne permet pas de regrouper les points, nous nous attacherons ensuite à repérer les plus similaires entre eux pour percevoir une forme.

La loi de destin commun : des parties en mouvement ayant la même trajectoire sont perçues comme faisant partie de la même forme.

La loi de clôture : une forme fermée est plus facilement identifiée comme une figure (ou comme une forme) qu'une forme ouverte.

See also TextPresentation

le principe de symétrie, qui réfère notre préférence vers la décomposition des images en éléments symétriques.

To get started with this blank TiddlyWiki, you'll need to modify the following tiddlers:
* SiteTitle & SiteSubtitle: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* MainMenu: The menu (usually on the left)
* DefaultTiddlers: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>

!! [[Alan Cooper]] - About Face 3
!!! Site Objectives
* Desirability : what do people need ?
* Viability : What will sustain a business ?
* Capability : What can we build ?
!!! Design Process
* Research
** 4. Understanding Users: [[Qualitative Research]]
* Modelling
** 5. Modelling Users: [[Personas and Goals]]
* Requirements
** 6. The foundation of Design: Scenarios and Requirements
* Framework 
** 7. From Requirements to Design: The Framework
* Refinement : 
** Part III Designing [[Interaction details]]
* Support

			- messagerie 
			- agenda
			- dossiers partagés
			- liste des tâches

Procter & Gamble - Outils de collaboration
Séquence de collaboration classique :
- Communicator  
affiche disponibilité en synchro avec l'agenda outlook,
permet d'échanger des fichiers 
- e-mail pour confirmation 
- TEL (pour l'ironie et l'humour)
- Net meeting (pour les cartes, plans, tableaux excel...)

!!! [[Hugh Beyer]] - Contextual Design
Contextual Inquiry - Master apprentice model
* Context
* Partnership
* Interpretation
* Focus

TreeStructure
[[Navigation Design]]

      Information Architecture - Almost every design today involves organizing information, whether it's an online policies-and-procedures library, product information, or user-generated videos. Information architecture helps us organize that content in a way that makes it easy for users to hone in to the specific content they're seeking. Skills include understanding methods for organizing information, such as taxonomies, folksonomies, facets, and ontologies; techniques for deriving user hierarchies, such as card sorting; and creating design deliverables, such as site maps.

[[Intranet Organisation]]

TextPresentation
TypoGraphy

Information Design - Presenting complex information for easy interpretation is key for a successful user interface. Knowing when to use specific table or graph types and using novel approaches for exploring detailed data sets, whether it's pricing information, product comparison tables, or trend charts, makes solid information design a core component of the design process. Skills include knowing when to apply the variety of chart and table formats, such as pie charts, hi-low diagrams, and cluster treemaps; how to create interactive data explorers, such as star fields and drill-down pivot tables; and working with combining multiple data sources, such as data-mining techniques.

Voir aussi [[Rédaction]]

!! [[James Kalbach]] - Designing Web Navigation
!!!! Information Seeking & emotions
* Starting : identifying relevant sources of interest [emotion : impatience, skepticism]
* Chaining : following and connecting new leads [emotion : optimism, anticipation]
* Browsing : scanning contents  
* Differentiating : filtering and assessing [emotion : uncertainty, confusion]
* Monitoring : keeping abreast of developpements  [emotion : hope, attachment]
* Extracting  [emotion : relief, (dis)satisfaction]
!!!! Seeking Information online
* People constantly evaluate and re-evaluate what they find for relevance to their information needs. Browsing and searching are complementory and not mutualy exclusive. There is no single, direct path to the information.
!!!! Web browsing behaviour
* Revisitation - navigating to a previously visited page is prevalent in a typical Hube and Spoke style of navigation finding comfort in familiarity.
* People move very quickly on the web, with pages displayed only a few seconds.
!!!! [[Donna Maurer]] - Modes of Information Seeking
!!!! [[David R. Danielson]] - Transitional Volatility in Web Navigation
!!!! [[Steve Krug]] - Satisficing
!!!! [[Elaine Tom]] - Recognizing Digital Genre

La cartographie de site web permet de visualiser et de maîtriser dans sa globalité l’ensemble des informations publiées en ligne par votre organisation. C’est un véritable tableau de bord en support de la décision stratégique pour les dirigeants et les équipes projet.
La visualisation est critique pour faire avancer, valider et orienter les discussions au sein de l'équipe. Ces discussions, à leur tour, influence les recommandations pour la réorganisation du portail.
Une seule cartographie peut résumer et communiquer des détails concernant des centaines de pages d'un site ou des centaines de sites d’un portail.

Cartographie de l’arborescence existante
Un code graphique et un fond de carte présentant l’architecture des contenus doit être élaboré à cette étape pour permettre de représenter efficacement l’information pertinente.
La carte de l’existant est un document statique qui restitue une vision historique de la structure du site web au moment stratégique du lancement d’une mission de refonte. Les informations qui y seront représentées seront du type : principes de navigation globale ou locale, accès aux contenus, typologie et taille des contenus.
L’intérêt de cette démarche est de disposer d’un document unique de référence qui donne à voir ce qui existe à l’ensemble des acteurs de la refonte du portail. Pour l’Insee, il s’agit de documenter le site tel qu’il est aujourd’hui avec la visualisation des enjeux principaux de la refonte.

Visualisation de l’organisation interne
Nous représentons sur le fond de carte du site existant, les responsabilités éditoriales et techniques, voire des processus en place ou des détails techniques importants.
Cette couche d’information permet d’appréhender les conséquences éditoriales ou techniques des décisions de réorganisation.

Visualisation de scénarios ex BnF ou INRAP

!! [[Alan Cooper]] - About Face 3
* 8 Synthesizing Good Design: Principles and Patterns
* 12 Designing Good Behavior
* 13 Metaphors, Idiom and Affordances
* 14 Visual Interface Design

Modern applications have moved past filling out a one-page form and pressing the submit button. Instead, they are now complex interactions, combining business requirements with a easy-to-follow user flow. Interaction design skills include knowing when to utilize different application structures, such as hub-and-spoke designs versus interview flows;
[[Foundations of Interaction Design]]

*Le problème : Comment proposer un enchaînement fluide de toutes les fonctionalités nécessaires
*Objectif : Choisir et décliner un [[Modèle d'Intéraction]] pour rendre intuitif l'enchaînement des étapes.
*Information recherchée :
**Fonctionnalités retenues
**Volumétrie des contenus.
*Rôle de K+A :
**Proposer les différents modèles possibles
**Proposer des séquences de fonctionnalités par tâche.
*Livrables : Description écrite des séquence de fonctionnalités par tâche, de façon à couvrir l'ensemble des fonctionnalités nécessaires. [[Workflow Diagram]]
*Implication attendue du client :
**Contraintes techniques.
**Evaluation des fréquences d'utilisation.
**Définition des fonctionnalités critiques.

Easy to learn or easy to use ?
Easy to remember or easy to understand ?
Un système qui prend en compte l'expérience de l'utilisateur est susceptible de fournir au novice une aide et à l'expert des raccourcis.
Le novice doit être guidé pas à pas dans sa découverte du système alors que l'expert qui est déjà efficace a besoin d'aller plus vite.

! Alan Cooper - About Face 3 - Designing Interaction Details
*[[Searching]] and Finding
*Understanding [[Undo]]
*Rethinking [[Files and Save]]
*Improving [[Data Entry]]
*Pointing, Selecting and [[Direct]] Manipulation
*[[Window]] Behaviors
*[[Controls]]
*[[Menus]]
*[[Toolbars]]
*[[Dialogs]]

The Interaction Costs
Cost of Decision. This is not included in the original Norman's model but is clearly relevant in information visualization. Complex visualizations often provide initial overviews without clues on what to do next. How do we form a goal? And how can the system help focus on some initial interesting data segments?

Cost of System Power. Once people have a goal in mind, they need to translate it into operations. If the interface is too complex or does not provide sufficient clues, the user might be stuck or lost. And, let's admit it, visualization interfaces can be very complex or have esotheric behaviors at times, so this is definitely a relevant cost to take into account.

Cost of Multiple Input Modes. I like this cost because it is very specific to information visualization. In order to deal with complex analysis tasks, designers and researchers had to invent complex interactions that require multiple modes or overloaded functions, but this, of course, often makes things too complicated. Think multiple-views or zoom & pan interfaces.

Cost of Motions. This is where the real action takes place, that is, when you move your finger and arm to point, click, drag, and so on. Here, the cost mainly refers to the ease with which certain targets can be reached (you might want to get acquainted with Fitt's Law if you do not know what it means). Sometimes we design our visualizations with targets that are too small to be reached, or easily occluded, or, even worse, they are moving. Other times an operation requires tens of clicks to be execute. All this add up to cost, and is of course bad.

Cost of Visual Clutter. Once an operation has been executed at the interface level you normally expect the visualization to react and you want to perceive the state of the system. Visual clutter can hinder this perception.

Cost of View Changes. Many interactions result in a view change in your visualization and this has of course a cost because each time the view changes you have to re-interpret it. Zoom & Pan is a very common example of interaction that triggers a view change.

Cost of State Changes. Often, when analyzing data, people go through a series of different states which require an intricated set of actions and operations. Every time the state changes there is a cost associated with being able to underatand the current state and especially being able to go back to previous ones.

! Offre
*Le problème : Comment organiser les fonctionnalités retenues à l'écran ? L'ergonomie consiste ici à  limiter au maximum les efforts des utilisateurs (en regroupant les fonctionnalités de même type, en chassant les différences arbitraires de positionnement ou d'interaction).
*Objectif : Construire des écrans ergonomiques proposant toutes les fonctionnalités retenus.
*Information recherchée :
**Modèles d'interaction possibles.
**Contexte de navigation depuis l'application vers le reste de l'espace en ligne de l'IRSN.
**Volumétrie des contenus à afficher.
*Rôle de K+A :
**Proposer zonage, système de navigation et d'interaction, et présentation de l'information sous forme de gabarits de page.
**Présenter les gabarits en réunion du groupe "utilisateur final".
*Livrables :Dessins de gabarits de 5 fenêtres au format PDF.
*Implication attendue du client :
**Validation des gabarits.

*Interprétation par Inférence
**déductive (règle)  règles du web
**inductive (prémisses empiriques sur le site même) charte graphique homogène (voir habituation, cohérence...)
**abductive (par élimination, le plus vraisemblable)  éviter une terminologie trop générique qui ne permet pas d'éliminer, trouver une classification discriminante. SatisFacing, TreeStructure

Voir aussi : [[Visual Design]], GesTalt, BertinVariables

Client speaks in term of desired features not of needs and problems. So ask why he wants the feature, and then why again...

*Le problème : Les scénarios imaginés en groupe sont généralement créatifs et ambitieux, mais ils conduisent à des "usines à gaz", tandis que l'interview en face à face, apporte un éclairage différent, moins créatif, mais plus proche du contexte d'utilisation.
*Objectif : Faire réagir des utilisateurs en confrontant les scénarios initiaux avec des utilisateurs représentatifs.
*Information recherchée auprès des utilisateurs représentatifs :
**Scénario de tâches les plus courantes, en regard des tâches plus anecdotiques.
**Procédures en place et outils utilisées (en évaluant les fréquences et les quantités à gérer).
**Difficultés rencontrées avec le système existant.
**Liste des tâches potentielles.
**Réactions face aux 1 à 5 scénarios imaginés dans la phase précédente.
*Rôle K+A :
**Interviewer 5 utilisateurs représentatifs.
**Amender les scénarios initiaux.
*Livrable : Texte présentant les 1 à 5 scénarios finals.
*Implication attendue de XXX : Repérer les aspects non représentatifs, artefact des interviews.

!!!Structurer l’expression des besoins sous forme de scénarios.
#Quel est le problème ?
##Ouvrir (Parlez moi de ..., Et après ...)
##Contrôler (Combien?, A quelle Fréquence ? Où ?)
##Confirmer (Si j'ai bien compris, reformuler ? C'est bien ça ?)
#Qui ça impacte ?
##Ouvrir (Parlez moi de ..., Et après ...)
##Contrôler (Combien?, A quelle Fréquence ? Où ?)
##Confirmer (Si j'ai bien compris, reformuler ? C'est bien ça ?)
#Visualiser le futur.
##Ouvrir (Parlez moi de ..., Et après ...)
##Contrôler (Combien?, A quelle Fréquence ? Où ?)
##Confirmer (Si j'ai bien compris, reformuler ? C'est bien ça ?)

"Pour <valeur>(a), comme <rôle>(b), je veux <action>(c)."
a. conduite par la valeur,
b. centrée sur l’utilisateur et
c. independant de la solution ou des taches.

!!!Extreme User Research
Getting information from surrogate users. Those are the ones within a company who talk directly to the customers. We want to talk to the people who talk to the people.
semi-structured interviews that last no longer than 30 minutes. This time limit is a profitable constraint. It adds a stress that forces the interviewee to focus on the core, on the essentials. During those 30 minutes, we want to know as much as possible about the customers:
* What triggered the call? For example, was it a problem, advertisement, word of mouth, season, news in the media, life event like a birth, the first job, moving to another place?
* What is the whole purpose of the call?
* What are the callers’ main concerns? Are there any misconceptions or incomprehensions about the company’s products or services?
* What words do the callers use to express their needs?

Okay. Now, you have done your 40 interviews. You’re swamped with data. What’s next? Well, all you have to do is:

1. Extract all the facts that you’ve found.
2. Write them on sticky notes.
3. Tag each note appropriately using a word or a symbol. I usually use words like user, goal, trigger, concern, FAQ, love factor, hate factor, and incomprehension. These tags will really help you later on for documentation. You can also use different colored sticky notes for this purpose.
4. Find patterns and create groups around types of users.
5. Create some first-version personas and then refine them.
6. Show and tell everyone about your findings.

*Access
**web Site
**Intranet
**Extranet
*Interconnection
**Single with different sections
**Single, plus different sites for one part of the organisation (ex HR)
**Multiple sites or portals, built on home country model
**Diverse familly of sites or portals, little commonality
**Standardised familly of sites, central point
**Portal, single entry point customised
*Localisation
**National
**International
***Single
***HQ centric
***Polycentric
***Portal

(source SMILE)
Portail = Fonction de menu (liste de liens) et d'aggrégateur (fenêtre sur les ressources)
*liens vers ressources tierces
		        - intranet
			- communication 
			- référentiel documentaire
* services
**webisation des applications métier
			- administration des applications
			- gestion des droits d'accès
			- identification unique
			- cadre d'intégration
**GroupWare
* PerSonalisation 


L'Aggrégation peut se faire par 
	- iframe (old)
	- capture d'HTML
	- flux XML
	- webservice (portlets)
	- passerelles spécifiques vers les bases
	- application entière en tant que module

!! Sémiologie graphique
* [[Définition de la graphique]]
!!!! I L'analyse de l'information
* Invariant et composantes
* Nombre des composantes
* Longueur des composantes
* Niveau d'organisation des composantes
** qualitatif (ex. orange, pomme, bananes). la Diagonalisation est possible : mise en ordre réciproque de deux composantes qualitatives pour simplifier la lecture.
** de l'ordre (ex. froid, tiède, chaud)
** quantitatif (ex. quart, triple, 4 fois cela)
!!!! II [[Les moyens du système graphique]] : le plan et les variables rétiniennes
!!!! III Les règles du système graphique
* La théorie de l'Image : L'image permet de voir pendant un instant minimum de perception, toutes les correspondances définies par une question (et seulement celle-là). Les constructions les plus efficaces sont celles dans lesquelles toutes questions, quelque soit son niveau, obtient une réponse perceptible en une seule image. Sinon le lecteur doit faire la somme d'images sélectionnées successivement.
* Les étapes du processus de lecture
* Les questions possibles - Les niveaux de lecture : La graphique peut répondre à autant de questions que de composantes sur 3 différents niveaux de lecture :
** élémentaire. Par exemple : à telle date (composante X), quel est le cours de l'action Truc (composante Y) ?
** moyen : Par ex. dans les trois premiers jours, quelle a été l'évolution des prix?
** supérieur : Par ex. sur toute la période, quelle a été l'évolution du prix
* Définition de l'Image
* Construction de l'image
* Limites : dans une une information a plus de 3 composantes, il faut choisir des questions préférentielles, introduites par un seul instant de perception.
* Les trois fonctions de la représentation graphique
** enregistrer
** communiquer
** traiter
* Les règles de construction
* [[Les règles de lisibilité]] ou règles de séparation
cf GesTalt.

!! Designing Web Navigation
Part I Foundations of Web Navigation
* Introducing Web Navigation
** [[The Need for Navigation]]
** [[Design philosophies]]
* Understanding Navigation
** [[Information Seeking]]
* [[Mechanisms of Navigation]]
* [[Types of Navigation]]
* [[Labelling Navigation]]
Part II Framework for Navigation Design
* Evaluation
* Analysis
* Architecture
* Layout
* Presentation
Part III Navigation in Special Contexts
* Navigation and Search
* Navigation and Social Tagging Systems
* Navigation and Rich Web Application

!! Designing Interfaces
* 1. What users do : [[Users patterns]]
* 2. Organizing content : [[Information Architecture]] and [[Application structure]]
* 3. Getting around: [[Navigation]], signposts and wayfinding
* 4. Organizing the page: [[Layout]] of page elements
* 5. Doing things : [[Actions and Commands]]
* 6. Showing complex data: Trees, Tables and other [[Information Graphics]]
* 7. Getting inputs from users: Forms and controls
* 8. Buiders and editors
* 9. Making it look good: Visual style and aesthetics

!! The Elements of User Experience 
* Strategy
** [[Site Objectives]] business, creative, or other internally derived goals for the site. 
** [[User Needs]] externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. 
* Scope
** Web as software interface, task oriented : [[Functional Specifications]] "feature set": detailed descriptions of functionality the site must include in order to meet user needs 
** Web as hypertext system, information oriented : [[Content Requirements]] definition of content elements required in the site in order to meet user needs 
* Structure
** Web as software interface, task oriented : [[Interaction Design]] development of application flows to facilitate user tasks, defining how the user interacts with site functionality
** Web as hypertext system, information oriented : [[Information Architecture]] structural design of the information space to facilitate intuitive access to content
* Skeleton
** [[Information Design]] in the Tuftean sense: designing the presentation of information to facilitate understanding
** Web as software interface, task oriented : [[Interface Design]] as in traditional HCI: design of interface elements to facilitate user interaction with functionality
** Web as hypertext system, information oriented : [[Navigation Design]] design of interface elements to facilitate the user's movement through the information architecture
* Surface
** [[Visual Design]] graphic treatment of interface elements (the "look" in "look-and-feel") or visual treatment of text, graphic page elements and navigational components

!!The Laws of Simplicity
*reduce : "SHE's always right" (Shrink, Hide & Embody)
*organize : Organization makes a system of many appear fewer. SLIP (Sort, Label, Integrate, Prioritize)
*time : Savings in time feel like simplicity.
*learn : Knowledge makes everything simpler. (Basic, Repeat, Avoid Desperation)
*differences : Simplicity and complexity need each other.
*context : What lies in the periphery of simplicity is definitely not peripheral.
*emotion : More emotions are better than less.
*trust : In simplicity we trust. (ex. undo)
*failure : Some things can never be made simple.
*the one : Simplicity is about subtracting the obvious, and adding the meaningful.
*THREE KEYS
**away : More appears like less by simply moving it far, far away.
**open : Openness simplifies complexity.
**power : Use less, gain more.

#[[Analyse de l'Existant]]
#[[Scenarios Utilisateur]]
#[[Interviews Utilisateurs]]
#[[Interaction Design]]
#[[Interface Design]]
#[[Visual Design]]
#[[Test]]
#[[Aide en ligne]]
#[[Présentation de l'Outil]]
#[[Rédaction]]
#[[Change Management]]
http://www.flickr.com/photos/31353343@N05/sets/72157608201048624/

!The image of the city
5 Wayfinding elements :
*path
*edge
*district
*node
*landmark

!!! [[James Kalbach]] - Designing Web Navigation
* Aspects of good labels
** Descriptive labels
** Mutualy exclusive
** [[Charles Ammi Cutter]] - Specificity
** Consistent labels
*** Granularity
*** Syntax
*** Presentation
*** Usage [use same label in different places]
** Longer label help people to better predict what will come next 
*** but <13 words
*** use short label with accompanying instructional text
*** tooltip are not navigational help : by the time they see it, user have already chosen wich link to click.
* Labelling sytems
** Browser titles
*** Bookmarking
*** Tabbed browsing
*** Printing
*** Search result links
** URL
** Page title [ can be more detailed then the link to the page, to avoid redundancy]
*Persuasive labels
** Descriptive labels : "Dons"
** Call to action : "Get involved"
** Persuasive : "How can you help" answoring the question in the mind of the user.

/***
|''Name:''|LegacyStrikeThroughPlugin|
|''Description:''|Support for legacy (pre 2.1) strike through formatting|
|''Version:''|1.0.2|
|''Date:''|Jul 21, 2006|
|''Source:''|http://www.tiddlywiki.com/#LegacyStrikeThroughPlugin|
|''Author:''|MartinBudden (mjbudden (at) gmail (dot) com)|
|''License:''|[[BSD open source license]]|
|''CoreVersion:''|2.1.0|
***/

//{{{
// Ensure that the LegacyStrikeThrough Plugin is only installed once.
if(!version.extensions.LegacyStrikeThroughPlugin) {
version.extensions.LegacyStrikeThroughPlugin = {installed:true};

config.formatters.push(
{
	name: "legacyStrikeByChar",
	match: "==",
	termRegExp: /(==)/mg,
	element: "strike",
	handler: config.formatterHelpers.createElementAndWikify
});

} //# end of "install only once"
//}}}

!! [[Jacques Bertin]] - Sémiologie graphique
* Le plan
** L'Implantation : signification d'une tâche dans le plan.
*** point
*** ligne
*** zone
** La disposition d'une variable dans un plan a toutes les propriétés perceptives
*** Association : toutes les catégories confondues, signaux perçus comme semblables
*** Sélection :  signaux perçus comme différents et formes des familles
*** Ordre :  signaux perçus comme ordonnés
*** Quantité :  signaux perçus comme proportionnels entre eux
** Il existe 4 Impositions selon la nature des correspondances exprimées dans le plan
*** Diagramme : à un élément d'une composante, correspond un élément de l'autre composante
*** Réseau : à un élément d'une composante, correspond un autre élément de cette composante
*** Cartographie : distribution observée
*** Symbolique : analogies figuratives
** Et 5 Types d'Imposition pour les diagrammes et les réseaux
*** semis
*** rectiligne
*** circulaire
*** orthogonal
*** polaire
* Les 6 variables rétiniennes (perceptions correspondantes)
** taille : - , Sélective, Ordonnée, Quantitative
** valeur : - , Sélective, Ordonnée, -
** grain : - , Associative, Sélective, Ordonnée, -
** couleur : -, Associative, Sélective, - 
** orientation : -, Associative, Sélective, -
** forme : Associative, - , - , -

!! [[Jacques Bertin]] - Sémiologie graphique
(ou règles de séparation)
* Densité graphique
** Moins de 10 tâches au cm2 dans le domaine de la figuration 
** Mais la densité peut être énorme pour une Image homogène
* Séparation angulaire : ne pas écraser les deux dimensions du plan
* Séparation rétinienne : séparer les tâches significatives des non significatives (la forme du fond)

avec 2nd niveau (voir 3em niveau) to Grand-Père, Père, Fils, Frères, sometime Oncles...
*si un lien conduit à une seule page, lien direct
*si un lien conduit à peu de pages : la première par défaut
*si un lien conduit à de nombreuses pages : liste de liens,
*si un lien conduit à de très nombreux liens : interface de recherche

!! A Simplified Model for Facet Analysis
!!! Ranganathan Canons (1967)
** Differentiation advises that when dividing an entity into its component parts, it is important to use characteristics of division (i.e., facets) that will distinguish clearly among these component parts.
** Relevance states that when choosing facets by which to divide entities, it is important to make sure that the facets reflect the purpose, subject, and scope of the classification system.
** Ascertainability states that it is important to choose facets that are definite and that can be ascertained.
** Permanence, the facet “colour” should not be used to divide CHAMELEONS
* Idea plane, which involves the process of analyzing a subject field into its component parts;
* Canons for Succession of Characteristics
** Concomitance states that all the facets used to divide an entity must be mutually exclusive, i.e., no two facets can overlap in content.
** Relevant Succession suggests that when choosing the citation order of facets, it is essential to ensure that this order reflect the purpose, subject, and scope of the classification system.
** Consistent Succession states that once a citation order of facets has been established for a classification system, it should not be modified unless there is a change in the purpose, subject, or scope of the system.
* Canons for Array
** Exhaustiveness states that all classes and sub-classes in a classification system should present all aspects of their parent universe.
** Exclusiveness states that all classes and sub-classes should be mutually exclusive. This Canon appears to repeat the concept underlying the Canon of Concomitance, which pertains to the use of mutually exclusive facets.
** Consistent Sequence states that similar classes and sub-classes should follow a parallel citation order.
* Canons for Chain
** Decreasing Extension states that as one applies more and more characteristics of division to an entity, the fewer individual aspects of that entity will emerge (e.g., there are far fewer types of dogs than there are types of mammals).
* Verbal Plane, which involves the process of choosing appropriate terminology to express these component parts;
** Context states that the meaning of an individual term is given its context based upon its position in the classification system. This canon is particularly useful for distinguishing among homographs,
** Enumeration states that the meaning of a class is made clear by its subdivisions.
** Currency states that the terminology used in a classification system should reflect current usage in the subject field.
** Reticence states that the terminology used in a classification system should not reflect bias or prejudice.
* Notational Plane, which involves the process of expressing these component parts by means of a notational device
** Synonym and Homonym state, respectively, that each subject can be represented by only one unique class number and that each class number can represent only one unique subject. In other words, these Canons pertain to the mutual exclusivity, if you will, of notation.
** Relativity states that the number of characters or digits in a class number should be the same as the order of the subject represented by it
*Principles of Spatial Contiguity
** Bottom Upwards
** Principle of Top Downwards
** Left to Right
** Clockwise Direction
** Counter Clockwise Direction
** Periphery to Centre
** Centre to Periphery
!!! CRG THEORY OF FACET ANALYSIS
* Principles for Choice of Facets
** Division states that a facet must represent only one characteristic of division of the parent universe.
** Homogeneity and Mutual Exclusivity state respectively that facets must be homogeneous and mutually exclusive, i.e., that the contents any two facets cannot overlap, and that each facet must represent only one characteristic of division.
** Fundamental Categories states that there exist no categories that are fundamental to all subjects, and that categories should be derived based upon the nature of the subject being classified.
*CRG Principle of Order in Array:
** Chronological Order
** Alphabetical Order
** Spatial/Geometric Order
** Simple to Complex Order
** Complex to Simple Order
** Canonical Order
** Increasing Quantity
** Decreasing Quantity

!!Web Application Form Design

forgiving format (but intelligent understanding)
structured format (ex. product key)
fill in the blank (like in a sentence)
input hints
input prompt (in the field)
autocompletion (ex. url in firefox)
dropdown chooser
illustrated choice (pictures instead of words)
list builder
good defaults
same page error messages

“Input elements should be organized in logical groups so that your brain can process the form layout in chunks of related fields.” –HTML: the Definitive Guide

Quite rare is the Web application that doesn’t make extensive use of forms for data input and configuration. But not all Web applications use forms consistently. Variations in the alignment of input fields, their respective labels, calls to action, and their surrounding visual elements can support or impair different aspects of user behavior.

Form Layouts
When the time to complete a form needs to be minimized and the data being collected is mostly familiar to users (for instance, entering a name, address, and payment information in a check-out flow), a vertical alignment of labels and input fields is likely to work best. Each label and input field is grouped by vertical proximity and the consistent alignment of both input fields and labels reduces eye movement and processing time. Users only need to move in one direction: down.

vertical labels

In this layout, it’s advisable to use bold fonts for input field labels. This increases their visual weight and brings them to the foreground of the layout. When they are not bold, labels may compete with input fields for a user’s attention as they have almost equal visual weight.

When the data being collected by a form is unfamiliar or does not fall into easy to process groups (such as the various parts of an address), left-justifying input field labels makes scanning the information required by the form easier. Users can just scan the left column of labels up and down without being interrupted by input fields. However, the distance between the labels and input fields is often elongated by long labels, and as a result, completion times may suffer. Users have to “jump” from column to column in order to find the right association of input field and label before inputting data.

Left-Justified Horizontal Labels

An alternative layout, right aligns the input field labels so the association between input field and label is clear. However, the resulting left rag of the labels reduces the effectives of a quick scan to see what information the form requires. In the Western world, we read from left to right, so our eyes prefer a hard edge along the left side.

Right-Justified Horizontal Labels

Using Visual Elements
Due to the advantages of a “left-justified horizontal label” layout (easy scanning of input labels and reduced vertical screen space), it may be tempting to attempt to rectify its primary shortcoming: the separation of input fields and their respective labels.

One such approach features the addition of background colors and rules: the different background colors create a vertical unit of labels and a vertical unit of inputs; the horizontal rules form a relationship between each label and input field pair. Though this approach may seem desirable, it actually creates a few problems.

Through gestalt (our innate rules of visual perception), an additional 15 visual elements are added to the layout: the centerline, each background box, and each horizontal line. These elements begin to distract our eye and make it more difficult to focus on the most important elements in the layout: the labels and input fields. As Edward Tufte points out: “Information consists of differences that make a difference.” In other words, any visual element that is not helping your layout ends up hurting it. This can be seen when you try to scan the left column of labels. Your eye repeatedly pauses to consider each horizontal line and the box created by each combination of line and background color.

Backgrounds & Rules

Of course this doesn’t mean that background colors and rules should never be used within form layouts. When there is value in pointing out related groupings of information to users, a thin horizontal rule or light background color can visually unite related data. Both of these elements (rules and background colors) can be especially useful for drawing attention to the primary call to action of a form.

Seperating Related Content

Primary & Secondary Actions
The primary action associated with a form (most commonly “submit” or “save”) needs to carry a stronger visual weight (in the example above bright color, bold font, background color, etc.) than the other form elements and should vertically align with the input fields. This illuminates a path for users and guides them to completion of the form.

When a form has multiple actions such as “Continue” and “Go Back” it may be wise to reduce the visual weight of the secondary action. This minimizes the risk for potential errors and further directs users to completion.

Primary & Secondary Actions

Though these guidelines can help better position a form for your specific purpose, the combination of layout, visual elements, and content that’s right for you should still be verified through user testing or data analysis (completion rates, errors, etc.).

For more on Form Design...

Check out Luke's upcoming book about Web form usability, visual design, and interaction design considerations: Web Form Design Best Practices.

[[Bastien & Scapin]]
[[Jacques Bertin]]
[[Alan Cooper]]
[[Jesse James Garrett]]
[[Appleseed & Holst]]
[[Scott Jenson]]
[[James Kalbach]]
[[John Maeda]]
[[Peter Morville]]
[[Dan Saffer]]
[[Bill Scott]]
[[Jenifer Tidwell]]
[[Edward R. Tufte]]
[[Colin Ware]]
[[Susan Weinschenk]]
[[Luke Wroblewski]]

[[Project Management]]
[[Technologie]]

* Step Navigation
* Paging Navigation
* Breadcrumb trail
** Location Breadcrumb trail
** Path Breadcrumb trail
** Attribute Breadcrumb trails
* Tree Navigation
* Site map
* Directories
* Tag clouds
* A to Z Indexes
* Navigation Bars and tabs
* Vertical menu
* Dynamic menu
* Drop down menu
*Vizualizing navigation
** Star tree
** Visual tree
** Visual cluster
* Browser mechanism
** Back button
** Forward button
** Session history
** Browser history
** URL

!!! [[Alan Cooper]] - About Face 3
Part I Understanding Goal Directed Design
* 2. Implementation Models and Mental Models

[[Alan Cooper]]

"Use menus to provide pedagogic vector"
* button icons
* menu commands
* keyboard equivalents

"Disable menu items when they are not applicable"

! Standard menus for desktop applications
* File
* Edit
* Windows
* Help
! Optional menus
* View
* Insert
* Settings
* Format
* Tools

On Mobile Phone:
sequential hierarchical menus
sometime mapped to the number keys

!!!! Carola Zwick  - Navigation for the Internet and other Digital Media
*** Marginal colomn on the left
*** Horizontal menu at top (or bottom)
*** Main windows controls auxiliary windows
*** Navigation window controls main window
*** Mapping as menu
*** Context menu
*** Roll over menu

Design for specific types of individuals with specific needs
Personas are based on research, but when rigorous personas aren't possible: Provisional personas.
* Constructing Personas
** Step 1: Identify behavioral variables
*** Activities: What the user does, frequency and volume
*** Attitudes : How the user thinks about the domain and technology
*** Aptitudes: Education and training
*** Motivations: Why the user is engaged in the domain
*** Skills
** Step 2: Map interviews subjects to behavioral variables
** Step 3: Identify significant behaviour patterns: a set of subjects that cluster in six or height different variables.
** Step 4: Synthetize characteristics and relevant goals: 
*** Experience goals (ex. feel smart, have fun, remain focused...)
*** End goals (ex. be aware of problems before they become critical, stay connected with friends, get the best deal) - majority of persona goals.
*** Life goals (ex. life the good life, succeed in my ambition to..., Be popular)
** Step 5: Check for completeness and redundancy
*** Add political personas for stakeholder
** Step 6: Expand description of attributes and behaviors.
** Step 7: Designate persona types
*** Primary [only one per interface]
*** Secondary [max 3 or 4]
*** Supplemental
*** Customer
*** Served
*** Negative

Capacité d'un ContentManagementSystem à positionner le même article à différents endroits :
Exemple du match de foot à Parçay : dans la section SPORT et dans la section INFOS LOCALES.
*définis explicitement par l'utilisateur : sur telle ou telle page
*ou par règles de publication (exemple : article de type actualité, dans les 5 dernières, à afficher sur la page d'accueil).
Exemples:
**Joomla : impossible
**SPIP : avec les mots clefs
**Typo3 : "à la main" sur chaque page
**Jahia : oui
**eZ Publish : oui

*Mémoire à court terme (cortex pre-frontal) :

Notre capacité de stockage est limitée, c'est pourquoi il faut limiter la densité informationelle

Miller = 7+- 2 
George A. Miller [1956]. The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity
for Processing Information. The Psychological Review, 63(2), pages 81–97. http://www.well.com/user/smalin/miller.html. but It does not apply to choices which are visible!!

Unité d'information = 2 pages-écrans
UIE [1998a]. As the Page Scrolls. http://www.uie.com/articles/page_scrolling/.
better than short pages because leads to too many choices.

la caractéristique essentielle d'un menu: l'utilisateur est informé de l'ensemble des commandes qu'il peut exécuter à un moment donné. Cette information lève les contraintes mnémoniques importantes associées aux langages de commande. Ceci permet à l'utilisateur intermittent d'employer efficacement un tel interface. Il en va de même pour le novice, pour autant que ce dernier maîtrise les concepts informatiques utilisés par le système.


*Mémoire à long terme
**procédurale (savoir faire non verbalisable)  = raccourcis pour les spécialistes
**épisodique (autobiographique)
**sémantique

La pyramide est la technique de base pour mémoriser (cf. Pyramid principles)
concept de prospective memory: placer un repère au bon endroit de l'application pour faire penser l'utilisateur à quelquechose.

*On websites, that follow the Hierarchical model of navigation, there are many navigation tools from any specific page
**back button of the browser (mostly used navigation tool)
**Home link : Home is an important navigation element, mostly used by average users if it shows clear entry points task oriented
**Global Navigation to top sections at any time
**Color-coded sections
**FacetedNavigation
**[[Bread Crumbs]] 
**LocalNavigation 
**ContextualNavigation
**SearchSystem
*ProportionContentNavigation
*Other Navigation patterns
**linear (wizard) or Sequence map : and you are here indicator (for transactions)
**Hub and spoke : one section at a time and back to HUB (outils téléphone)
**Pyramid: (back/next et TOP)
**Modal panel : only one page until solved
***BlogNavigation
**network (WIKI)
**geographic 
**tabular
**Annotaded scroll bar
**Animated transitions for continuity
**Escape Hatch : ex. cancel button or Back Button on website

!!!! Carola Zwick  - Navigation for the Internet and other Digital Media
** The navigating machine
** Feedback 
** Hyperlinks and their pitfalls in navigation [Hypertext provoques leaps that are comparable to 'Riding the Tube'. Good orientation is the preservation of context : The user must be able to make a mental model of the whole context]
** Spacial memory [Simonides of Keos, Star trees, scroll & span, navigator]
** The time as a narrative framework [Tapisserie de Bayeux, 70 m, XIem]
** The zoom as a narrative framework [see Powers of ten, film by Eames office]
** Computers are called computer because they can compute

!!! [[Alan Cooper]] - About Faces 3
in [[Qualitative Research]]
** [[Ethnographic Interviews]]
** Focus groups. Tends to stifle exactkly the diversity of behaviour and opinions that designers must accomodate.
** Market segmentation by demographic criteria to assess viability of the product. Complements qualitative user research, but does not replace it.
** Usability testing. Best to compare later, in refinement phase of design,
*** Naming
*** Organization
*** First-time use and discoverability
*** Effectiveness (misssteps)
** Card sorting
** Task analysis

Paper prototypes are simply printouts of what the computer screen would look like when running your software. Usability subjects are given a pencil and asked to pretend that it's the cursor and to virtually "click" just as they would with a mouse. Whomever is running the test (usually a usability engineer or program manager) sits at the table with them and is responsible for reacting to the subject's actions by updating the virtual screen with the right printouts. For example, if the subject launched a dialog box, I would find a picture of that dialog box and lay it over the window they were looking at.

Parts to implement

Paper prototypes usually cannot mirror the whole software or web site to be produced. It is necessary to limit the scope of the prototype by focus or width and depth. Limiting a prototype by focus means to either show the uncertain and difficult issues or the well-known and easily designed ones. Width and depth refer to the level of generality of the prototype: Should the prototype represent the whole design without providing any detailed function, or should certain issues be shown in detail?

It is useful to concentrate on the general design rather than details, in early stages of the conceptual phase, to probe if the overall design meets the user's expectations. Specific details may be tested isolated from the general design later in the conceptual or implementation phases.

Running a usability test using paper prototypes is actually very simple.You don't need a hi tech usability suite or anything flashy like that. Just a room with a desk, a notepad and possibly a video camera to record the users responses. Spend a bit of time planning the test. Work out what areas of the site you want to test and come up with suitable user tasks. Stick to a few core tasks 2-4 and aim for them to take between 30-45min in total. If possible, do a dry run with a friend/colleague before hand to make sure the timing works and you have everything you need.

Having a pre written script is a good idea. It should outline who you are, what you're doing and what you want from the test subject. You should explain that you are testing the the prototype not the user and encourage the user to talk aloud as much as possible. Explain that the moderator probably wont be able to answer questions during the test but there will be time afterwards to do this.

The moderators main job is to encourage the user to talk aloud and explain what they are doing. Use open questions like "what are you thinking" to encourage the user to think aloud. Often the user will ask question like "what does this button do" or "what should I do next". It's important not to prompt the user so you need to ask question back like "what do you think the button will do" or "If this were website what do you think you would do next". It's also a good idea to ask users why they did a certain action, what they expected to happen or what they understood by a certain term. This help clarify their thought processes much more.

The moderators job is also to take notes. However you tend only to notice the big things and it's often the small things that give away the users thought processes. As such I highly recommend using a video camera to record the sessions. For paper prototype tests I'll usually tape a folder or something to the desk and use this as the "computer screen", then focus the camera on this area. As long as the prototypes are on the folder you know that what the user does will be in shot. It sounds stupid but you must make sure you have enough tape for all the sessions and that you can plug your camera in and it will reach.

Being involved in testing is an extremely interesting experience. You'll be amazed when everybody understands things you thought would cause problems, and then don't get things which you thought would be obvious. You'll start to see that people don't actually read your carefully crafted headings and explanations. What they do is dive straight in and go for the first likely option they find. Only when they get stuck or make a wrong move do people actually start studying and reading things more. User testing is an amazingly enlightening process and one that more design teams should partake in.

Once the testing is over it's time to start the analysis. We create a table with the test subjects along the top and problems down the side. As we go thought the tapes, read our notes and look at the prototypes we will add problems down the side and then notes about how each user dealt with that problem. This way we can see if only one person experienced a problem of if it was more wide spread.

This information will be written up in a report which we give to the client, outlining the main issues and our recommendations on how to solve them. We'll use this information to amend the wireframes and inform the decisions we make in the design phase.

The whole process does take time. Usually around 3-5 person days. However it's well worth the effort. It allows us to test out concepts at a very early stage and prevents us from having to rework things latter on when change becomes much more costly. Testing gives us an amazing insight into how a site will actually be used and allows us to deliver a product that better meets user needs .Testing is also a lot of fun and being involved with usability tests can really help designers learn to build more intuitive and user friendly websites.

Objectif : Pour s'y retrouver plus facilement

In IntranetPortal ability to personnalize by:

*By Profil : the user is part of a group defined by a profile (build on location, hierarchy, métier, workgroup caracteristics)
**filtre de droit appliqué à l'ensemble des ressources, qui ne laisse passer qu'une partie de la version complète
***n'existe pas chez EZ Publish ou SPIP
***Typo3 (PHP) : extensible par modules, gestion d'annuaire LDAP, sondages, forum, calendrier, recherche...
***Jahia (framework JAVA J2EE :  SAP livrent des portlets pour), modification des contenus directement dans la page
**groupe de pages créé spécifiquement pour chaque groupe : ex. Decathlon : Personnalisation pour les vendeurs en magasin, mais "difficultée à faire des pages que métier, il faut aussi des sites généraux !"

*By Preference
**L'utilisateur créé sa propre page (Yahoo! style) moins courant dans les grandes entreprises
***jetspeed (framework JAVA J2EE)

!! [[Alan Cooper]] - About Face 3 
*Beginners, Experts, and Intermediates
** Perpetual intermediates
** Designing for Different Experience Levels

!!!!Exemple de persona pour Alcatel
› Persona  central [il y en a d’autres importantes : technico-commerciaux ALCATEL, rédacteurs de documentation]
› Donnée biographiques de Roberto pour donner du réalisme 
› Importance de Roberto du point de vue d’ALCATEL (revendeur de moyenne importance)
› Importance d’ALCATEL du point de vue de Roberto (ex-user, potentiellement utilisateur intensif, intéressé mais plutôt hostile à cause de ses expériences antérieures)
› Objectifs de Roberto (et non pas les tâches) : disposer de l’information des Com Techs face au client.
› Niveau de connaissance de Roberto : parle anglais, niveau de connaissance intermédiaire sur le sujet : a reçu les formations ALCATEL, débutant avancé sur ordinateur, novice sur le système.
› Contexte d’utilisation : en s’asseyant, seul, sur portable de passage au bureau, connexion ADSL, après une formation ALCATEL de 2 jours qui a eu lieu 1 an avant…
› Usage : mission unique en moyenne tous les trois mois (mais varie fortement), surtout après le lancement de campagne.
› Information :  flux : que du téléchargement, volume : 26 com tech, complexité

!!  General Site Objectives
* Useful: As practitioners, we can't be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful
* Usable : Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient.
* Desirable : Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design.
* Findable : We must strive to design navigable web sites and locatable objects, so users can find what they need. Différence entre usability et findability ?
* Accessible : Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). Today, it's good business and the ethical thing to do. Eventually, it will become the law.
* Valuable

!! Alan Cooper - About Face 3
* Designing Desktop software
** Sovereign posture
** Transient posture
** Daemonic posture
* Designing for the Web
** Informational Web sites
** Transactional Web sites
** Web applications
** Internet-enabled applications
** Intranets
* Other Platforms
** Handheld
** Kiosks
** Television-based interfaces
** Automotive interfaces
** Appliances
** Audible interfaces

!! Morris & Sember - Project Management that Works

Crafting project communication according to DISC profiles:
- Dominant, challenge & control (insensitive)
- Influencing, Recognition & approval (undisciplined & talkative)
- Stability & support (slow & fearfull)
- Correcteness (picky)

Project communication plan
- Wednesday : Satus meeting
- Thursday : Updated Issues, risks and deliverable log
- Friday : Meeting notes, status report, to-do list, budget
- Monday : Meeting agendas

Status report :
- issues
- risks
- deliverables
- completed items
- upcoming project tasks

Defining the word 'done' 
(ex. after lessons learned)
qualifying questions

The Iron triangle
- Cost
- Schedule
- Quality

Project management process PERT:
- Work Breakdown Structure
- network diagram of activity sequence
- estimate time ( Best Case + (4*Most Likely) + Worst Case)/6 + Risk
- critical path

*User first scans for triger words, 
*Once they have decided what to do then, they start moving the mouse
*so do not hide menus in rollovers !
*En plus : the user must then remenber the menus he has opened.
*So how to choose proportion beetween content and navigation : depends on type of page : home, gallery, content pages. 
*You don't need the same display in each type of page : 
**on the content page, you can reduce global navigation. 
**à l'inverse, the home page should be a sort of site map.
*card stack (onglet)
*closable panels (accordéons)
*movable panels

!Static Invitations
*Call to action
*Tour Invitation
!Dynamic Invitations
*Hover invitation

Le problème :
		Disposer d'un support de présentation qui facilite l'adoption de l'application par les futurs utilisateurs. Ce support sera utilisée lors de présentation générales au lancement du produit. Ce support sera ensuite mis à disposition, sur l'index de l'aide en ligne, pour tous les utilisateurs qui n'auront pas participé aux réunions de présentation générale (les nouvelles recrues par exemple).

	Objectif :
		Création d'un support de présentation attractif et autonome pour accompagner l'adoption de l'outil par les futurs utilisateurs.

	Information recherchée :
		Messages attendus.
		Modèles Powerpoint existants.
		Contexte des présentations au lancement de l'application :
			niveau de compréhension des publics ciblés, 
			durée de présentation, 
			intervenants prévus, 
			contexte d'archivage Intranet.
		
	Rôle de K+A :
		Accompagner dans la sélection des contenus à présenter.
		Dessiner les diagrammes explicatifs.
		Proposer un graphisme attractif et des animations pertinentes le cas échéant.
								
	Livrables :
		Présentation Powerpoint de 20 planches.

!! [[Alan Cooper]] - About Face 3
*Qualitative versus Quantitative Research
** Stakeholder interviews
*** Product vision
*** Budget and schedule
*** Technical constraints or opportunities
*** Business drivers
** Subject Matter Experts interviews
** Customer interviews (who makes the decision to purchase the product)
** User interview
** User observation
** Literature review & Statistics
** Competitive audit
* Ethnographic Interviews: Interviewing and Observing Users
** [[Hugh Beyer]] - Contextual Inquiry
** Improving on contextual inquiry
*** Shorten interview process [to 1 hour]
*** Use smaller design teams 
*** Identify goal first (before tasks)
*** looking beyond business context (consumer domain for instance)
** Preparing & conducting [[Ethnographic Interviews]]
* [[Other Types of Research]]

*Lookup Patterns
**Autocomplete
**Live suggest
**Live Search
**Refining Search (Faceted Browse)
*Feedback Patterns
**Live Preview
**Progressiv Disclosure
**Progress Indicator
**Periodic Refresh

!! [[Dan Saffer]] - Designing for Interaction -  Refinement
* Constraints
** Time
** Money
** Technology
** Business needs
** User needs
** Context
** Tools
** Teams
** You
* The Laws and Principles of Interaction Design
** Direct and Indirect manipulation
** Affordances
** Feedback and feedforward
** Mental Model
** Standards
** Fitt's Law
** Hick's Law
** The magical number seven
** Testler's law of the conservative complexity
** The Poke Yoke principle
** Errors
* Frameworks
** Metaphor
** Posture
** Structure
* Documentation and Methods of Refinement
** Scenarios
** Sketches and models
** Storyboards
** Task-flows
** Use cases
** Mood boards
** Wireframes
** Service Blueprint
* Controls
** Switch
** Button
** Radio Button
** Dial
** Latch
** Slider
** Handel
** Jog dial
** Joystick
** Trackball
** 5-way
** Check-box
** Twist
** Scroll bar
** Drop down menu
** Multiple selection list
** Text box
** spin box
** voice
** gesture
** presence

*Accurate : True to the content
*Concise : Streamlined; contains just enough words and no more
*Familiar : Uses meaningful words to describe options and doesn’t require users to already know the offerings
*Comprehensive : Adequately describes all of the section's content
*Front-loaded : Starts with the "most–information-carrying word(s)"

La pyramide est la technique de base pour mémoriser [[Pyramid principles]]

[[Référencement]] 

Categorical decision making : utiliser un vocabulaire compréhensible : plus l'effort cognitif est important, moins l'enoncé est pertinent. voir [[Rubriquage]]

      Copywriting - Nobody likes using a design whose on-screen text reads like a 1950's Army instruction manual. The best user experiences have copy that excites and compels, making the user feel comfortable and secure about the design. Copywriting skills include identifying the style of voice and tone that matches the organization's brand, creating persuasive copy that motivates users to explore the design, and clearly stating benefit statements, to help the user understand the value of using new capabilities and functions. 

      Editing - What's not in a design is as important as what's included. Editing is not just about correcting bad grammar, but about creating a cohesive experience that doesn't have extraneous distractions. Skills include using techniques such as alignment maps to match the users' needs to the available functionality.

  
!! Olivier Duffez - Webrankinfo
* 1. Créer du contenu
* 2. Obtenir de nombreux liens externes (Backlinks)
* 3. Privilégier un netlinking de qualité
* 4. Choisir de bons [[titres]]
* 5. S'inscrire dans les meilleurs annuaires
* 6. Faire un site sans frames, avec un bon nom de domaine
* 7. Avoir un site toujours disponible
* 8. Créer un bon maillage des pages internes
* 9. Privilégier le texte aux images et vidéos
*10. Mettre à jour régulièrement son site

*Le problème  : Les participants de ce projet complexe ne partagent pas nécessairement la même expérience de création d'interface, les mêmes objectifs quand au projet, ni le même enthousiasme. Si les participants ne s'accordent pas sur un certains nombre de concepts et un processus structuré de conception au départ du projet, les discussions risquent de tourner en rond. La formalisation de scénarios concrets permet de faire partager une vision commune et de lancer le projet d'interface.
*Objectifs : Proposer des objectifs concrets
**Partager une vision commune des tâches à réaliser entre les différents membres de l'équipe projet.		Faire naître une dynamique de participation et de collaboration entre les parties-prenantes (première étape indispensable à une bonne conduite du changement).
**Formaliser des scénarios utilisateurs (qui permettrons de choisir les fonctionnalités dans la seconde phase).
*Information recherchée :
**Scénarios initiaux (enchaînement de tâches et sous-tâches entre elles).
**Contacts de 5 utilisateurs représentatifs pour interview (exemples :  stagiaire, juriste, secrétaire, scientifique, manager).
**Statistiques d'utilisation disponibles
*Rôle K+A :
**Animer la réunion de lancement du groupe de travail "utilisateur final", pour les aspects liés à l'IHM.
**Présenter la méthodologie de conception de l'IHM.
**Accompagner la définition de 1 à 5  scénarios utilisateurs et le choix de 5 utilisateurs représentatifs cibles correspondants.
**Analyser les statistiques disponibles.
**Formaliser les 5 happy path scénarios choisis.
*Livrables : 
**Texte présentant 1 à 5 scénarios utilisateurs initiaux.
*Implication attendue de l'IRSN 
**Apporter sa connaissance des  fonctionnements existants. 
**Transmettre 5  contacts d'utilisateurs représentatifs ciblés pour interviews.
**Fournir les statistiques pour aider à construire des [[Persona]]s

!!The simplicity shift
*Insight 1 - Personas: Break up the multiuser
*Insight 2 - Scenarios: Walk in their shoes
*Insight 3 - Unfeatures: There's more than meets the eye
*Insight 4 - The priority trick
*Insight 5 - Make the easy, easy and the hard, hard
*Insight 6 - See the water
*Insight 7 - Embrasse the impossible
*Insight 8 - Fail Fast
*Insight 9 - The design manifesto
*Insight 10 - The SWAT team

*Controlled vocabulary
**Synonym ring: simple list of equivalent terms.
**Authority file: list of preferred terms.
**Classification scheme: includes hierarchical relationships (broader, narrower) between terms.
**Thesaurus: includes associative relationships (see related) between terms.

Le browsing et la recherche ne doivent pas être séparés : ils peuvent fonctionner en parallèle.
Faire propositions avec les premiers résultats (avec des facettes par exemple) pour raffiner la recherche.

!!!! Patterns of Behavior by John Ferrara
## Alternating between search and browse
***Support robust cross-linking on each page
## Minimizing the results set
***Allow users to filter the search results by categories. Include a numeric count of the total number of results returned for the query and the total number for each category.Use “and” as the default operator rather than “or,”
## Surveying quickly
***Some users scan through the results quickly, and if none of the titles strike them as an ideal match, they may proceed several pages deep into the results set.
## Making immediate judgments
*** Other users look only at the first few results before deciding whether the query was successful or not. Finding nothing, these users may then resubmit the query or give up on search altogether.Optimize results for the most commonly submitted queries
## Agonizing over the query
*** functions that present searches similar to the one the user is typing.
*** Consider including lists of popular searches or automated storage of the user’s previous queries
## Pogosticking
***Allow users the option to open results in a new browser window to assist comparison)

!!! Site orientation 
** information oriented : 
***Information Web site
**Experience 
***corporate Web Site
***Promotion marketing Website
***Jeux immersif, ex. Flash Game,: immersion oriented
***graphique interactif
**Transaction : task oriented
***performing a transaction
***Application
***Application web 
***e-Commerce Web Site

Notes

User Centered Design

1. Your Checkout Process Should Be Completely Linear: z.B. Account setting dann nachste Seite in Wizard
2. Add Descriptions To Form Field Labels:  z. B. why do you need my e-mail Adress?
3. Avoid Contextual Words Like “Continue”:  Flug Prufen
4. Visually Reinforce All Sensitive Fields On The Payment Page:  Hintergrund, Padlock, Siele...
5. Don’t Use An “Apply” Button In Your Form
6. Format Field For Expiration Date Exactly As It Appears On Credit Card
7. Use Only One Column For Form Fields
8. Use Shipping Address As Billing Address By Default
9. Use Clear Error Indications
10. Registration Should Be Optional
11. Don’t Require Seemingly Unnecessary Information

/***
|''Name:''|SparklinePlugin|
|''Description:''|Sparklines macro|
***/
//{{{
if(!version.extensions.SparklinePlugin) {
version.extensions.SparklinePlugin = {installed:true};

//--
//-- Sparklines
//--

config.macros.sparkline = {};
config.macros.sparkline.handler = function(place,macroName,params)
{
	var data = [];
	var min = 0;
	var max = 0;
	var v;
	for(var t=0; t<params.length; t++) {
		v = parseInt(params[t]);
		if(v < min)
			min = v;
		if(v > max)
			max = v;
		data.push(v);
	}
	if(data.length < 1)
		return;
	var box = createTiddlyElement(place,"span",null,"sparkline",String.fromCharCode(160));
	box.title = data.join(",");
	var w = box.offsetWidth;
	var h = box.offsetHeight;
	box.style.paddingRight = (data.length * 2 - w) + "px";
	box.style.position = "relative";
	for(var d=0; d<data.length; d++) {
		var tick = document.createElement("img");
		tick.border = 0;
		tick.className = "sparktick";
		tick.style.position = "absolute";
		tick.src = "data:image/gif,GIF89a%01%00%01%00%91%FF%00%FF%FF%FF%00%00%00%C0%C0%C0%00%00%00!%F9%04%01%00%00%02%00%2C%00%00%00%00%01%00%01%00%40%02%02T%01%00%3B";
		tick.style.left = d*2 + "px";
		tick.style.width = "2px";
		v = Math.floor(((data[d] - min)/(max-min)) * h);
		tick.style.top = (h-v) + "px";
		tick.style.height = v + "px";
		box.appendChild(tick);
	}
};


}
//}}}

!! [[Bill Scott]] - Designing Web Interfaces
Page refresh creates articial break in the action - or a break in user's [[Flow]]. Also causing Change Blindness : failling to detect large change in the scene when a 'page refresh' is included [while change is obvious if there is no disturbance of surrounding].
* Overlays: mini page in lightweight layer over the page.
** Dialog Overlay
*** Use lightweight overlay instead of browser pop up or JavaScript alert boxes
*** Use Lightbox Effect if interaction should be modal
*** Avoid unnecessary Idiot Box
*** Don't use if a simpler, in page interaction would suffice
** Detail Overlay
*** Make activation and desactivation symetrical (wether hover with delay or click)
** Input Overlay
*** Make sure the only visual change between the field and the overlay is intentional.
* Inlays
** Dialog Inlay
** List Inlay 
*** Accordion: One at a time
*** Accordion: more than one pane at a time
*** Parallel content [ex. Filters in a Search]
** Detail Inlay
** Tabs
* Virtual Pages: extend virtual space of the page
* Process Flow: flow within the page itself

!!! Don't make me think
Satisfacing

!! Neuro Web Design
* Chap 1. Designing Web sites for Persuasion and the Inconsious Mind
* Chap 2. Wanting to Belong, the Power of Social Validation
* Chap 3. Feeling Indebted: How to Build in Reciprocity
* Chap 4. Invoking Scarcity
* Chap 5. Choosing Carefully -  Given too Many Choices, We Freeze
* Chap 6. It'a all about YOU
* Chap 7. Building Commitment - We want to think that we are Consistent
* Chap 8. Using similarity, Attractiveness and Association (security, food, sex)
* Chap 9. ???

*Hardware
**Cell Phone
**Kiosk
**PDA
**Computer
*Client
**Thin Client : HTML, CSS et Javascript. Light but needs all page reload.
**Rich Internet Application : souvant browser propre inclut dans le navigateur web (FLASH FLEX, AJAX = DHTML with XMLhttpRequest). Enables real time updates but problems with back buttons.
**Rich Client : programme sur la machine locale qui peut tourner sans connexion internet
**Stand Alone Applications
[[Intranet Portal]]
[[Content Management System]]

Test

Logique graphique : en distinguant ou regroupant (loi de la proximité loi de la similitude), hiérarchisant (taille et luminance) , le graphisme permet de voir les relations structurelles (sans avoir à les lire)

Densité de caractères à l'écran
La NASA (1980) recommande par exemple de ne pas dépasser une densité de 60%. Cette mesure de la densité s'effectue en comptant les espaces de l'écran qui sont occupés par un caractère et ceux qui restent libres. Cette mesure est réaliste si on se préoccupe de perception. Elle est relativement simpliste du point de vue cybernétique car la même information peut être exprimée par un nombre très variable de caractères.

Les abréviations augmentent la densité d'information. Ces écrans surchargés s'adressent à des utilisateurs 'experts'. Il s'agit de personnes qui utilisent quotidiennement le système.

Longueur des phrases
une étude de Duchnicky et Kolers (1983) montre que la vitesse de lecture est plus lente lorsque les lignes comprennent 26 caractères que lorsqu'elle en comprennent 78 (par contre, ils n'observent pas de différence entre les longueur de lignes de 52 et 78 caractères).

Justification du texte
Plusieurs études ont montré que l'espacement irrégulier des mots avait un effet négatif sur les temps de lecture, plus négatif que le non-alignement de la fin de chaque ligne (Tullis, 1988).

Texte en majuscule
Tinker (1965) établit que lire des textes en majuscules est environ 14% plus lent que des textes en majuscules et minuscules. Cette différence semble due au fait que notre lecture est saccadée: l'oeil ne 'glisse' pas sur le texte de façon continue, mais reste fixé une fraction de seconde sur un mot, puis saute au suivant. Les moments de fixation sur un mot constituent 94% du temps de lecture. Sachant qu'un adulte lit environ 250 mots par minutes, on comprend qu'il ne peut déchiffrer ces mots caractère par caractère, mais que, dans la majorité des cas, il reconnaît directement le mot en tant que tel, en tant que pattern visuel (ou au moins ses constituants). Or, la forme d'un mot est liée à la variété des lettres. Lorsque ces mots sont entièrement en majuscules, le mot prend une forme rectangulaire. Cette perte d'identité visuelle expliquerait le ralentissement de la lecture des mots en majuscules.

!! [[James Kalbach]] - Designing Web Navigation 
* Navigation provides access to information
** The content linking only model : the site is just a big web of related informations.
** The 'liquid information model : From a single word on any given page, any number of navigation actions are possible, leading to new content pages.
** The filter model : accessing all the content through a single page. 
*** First-time visitors would not get a good overview of the type of content available
*** Difficult for users to know when a search is completed
*** Bookmarking and general accessibility are also complicated
** The search model
** The structural browse model
* Navigation shows location
** Gives cues about exhaustiveness in seeking information and a sense of closure.
** A deep location of a page indicates that there isn't more on this subject on the site.
* Navigation shows 'aboutness' of a site
* Navigation reflects Brand : Easily navigable sites are likely to carry more credibility.

[[Alan Cooper]]

"Toolbars provide experienced users fast access to frequently used functions"
* butcons
* tooltips (well-timed lag: a second or two)
* disabled control if not applicable
* state indicating
* movable
* customizable

*Catégorisation discriminante pour conduire sur une bonne piste :
**compréhensible, 
**non ambigu, 
**mutualy exclusive, 
**collectively exhaustive
* Faceted Navigation
A faceted classification system allows the assignment of multiple classifications to an object, enabling the classifications to be ordered in multiple ways, rather than in a single, pre-determined, taxonomic order.
The most prominent use of faceted classification is in faceted navigation systems that enable a user to navigate information hierarchically, going from a category to its sub-categories, but choosing the order in which the categories are presented. 
This contrasts with traditional taxonomies in which the hierarchy of categories is fixed and unchanging. For example, a traditional restaurant guide might group restaurants first by location, then by type, price, rating, awards, ambiance, and amenities. In a faceted system, a user might decide first to divide the restaurants by price, and then by location and then by type, while another user could first sort the restaurants by type and then by awards. Thus, faceted navigation, like taxonomic navigation, guides users by showing them available categories (or facets), but does not require them to browse through a hierarchy that may not precisely suit their needs or way of thinking.

4 facettes avec 10 noeuds ont le même pouvoir discriminant que 10 000 noeuds de navigation [Taxonomy  stratégies - Joseph Busch]

Possibilité que donne un ContentManagementSystem de retrouver un article à différent points de l'arborescence pour satisfaire les différents publics et leurs différents besoins. Forcément lié au MultiPositionning ?

* Tree Size
Comme le Coût cognitif d'interprétation du Categorical decision making is more time consuming then simple visual search : Limiter la profondeur du site = Scrolls are better than short pages UIE [1998a]
A medium balance of breadth and depth of tree provides the best results, according to
Kevin Larson and Mary Czerwinski [1998]. Web Page Design: Implications of Memory, Structure and
Scent for Information Retrieval. In Proc. CHI’98, pages 25–32. ACM, Los Angeles, California. MémorisaTion
* Organization Models
**Exact organisation scheme
***chronological
***localisation
***alphabetical
**Ambiguous organisation scheme
***topical
***task-based (ex: Browse, Sell, Search, and Sign In) 
***format oriented : documents à télécharger
***audience-based
***metaphor-based
*Jenifer Tidwell, about IA in "Designing interfaces" List of :
**objects
**actions (verbs)
**subject categories
**tools
*Techniques :
**InformationVizualisation
**CardSorting

/***
Contains the stuff you need to use Tiddlyspot
Note you must also have UploadPlugin installed
***/
//{{{

// edit this if you are migrating sites or retrofitting an existing TW
config.tiddlyspotSiteId = 'usercentered';

// make it so you can by default see edit controls via http
config.options.chkHttpReadOnly = false;
window.readOnly = false; // make sure of it (for tw 2.2)

// disable autosave in d3
if (window.location.protocol != "file:")
	config.options.chkGTDLazyAutoSave = false;

// tweak shadow tiddlers to add upload button, password entry box etc
with (config.shadowTiddlers) {
	SiteUrl = 'http://'+config.tiddlyspotSiteId+'.tiddlyspot.com';
	SideBarOptions = SideBarOptions.replace(/(<<saveChanges>>)/,"$1<<tiddler TspotSidebar>>");
	OptionsPanel = OptionsPanel.replace(/^/,"<<tiddler TspotOptions>>");
	DefaultTiddlers = DefaultTiddlers.replace(/^/,"[[WelcomeToTiddlyspot]] ");
	MainMenu = MainMenu.replace(/^/,"[[WelcomeToTiddlyspot]] ");
}

// create some shadow tiddler content
merge(config.shadowTiddlers,{

'WelcomeToTiddlyspot':[
 "This document is a ~TiddlyWiki from tiddlyspot.com.  A ~TiddlyWiki is an electronic notebook that is great for managing todo lists, personal information, and all sorts of things.",
 "",
 "@@font-weight:bold;font-size:1.3em;color:#444; //What now?// &nbsp;&nbsp;@@ Before you can save any changes, you need to enter your password in the form below.  Then configure privacy and other site settings at your [[control panel|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/controlpanel]] (your control panel username is //" + config.tiddlyspotSiteId + "//).",
 "<<tiddler TspotControls>>",
 "See also GettingStarted.",
 "",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Working online// &nbsp;&nbsp;@@ You can edit this ~TiddlyWiki right now, and save your changes using the \"save to web\" button in the column on the right.",
 "",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Working offline// &nbsp;&nbsp;@@ A fully functioning copy of this ~TiddlyWiki can be saved onto your hard drive or USB stick.  You can make changes and save them locally without being connected to the Internet.  When you're ready to sync up again, just click \"upload\" and your ~TiddlyWiki will be saved back to tiddlyspot.com.",
 "",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Help!// &nbsp;&nbsp;@@ Find out more about ~TiddlyWiki at [[TiddlyWiki.com|http://tiddlywiki.com]].  Also visit [[TiddlyWiki Guides|http://tiddlywikiguides.org]] for documentation on learning and using ~TiddlyWiki. New users are especially welcome on the [[TiddlyWiki mailing list|http://groups.google.com/group/TiddlyWiki]], which is an excellent place to ask questions and get help.  If you have a tiddlyspot related problem email [[tiddlyspot support|mailto:support@tiddlyspot.com]].",
 "",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Enjoy :)// &nbsp;&nbsp;@@ We hope you like using your tiddlyspot.com site.  Please email [[feedback@tiddlyspot.com|mailto:feedback@tiddlyspot.com]] with any comments or suggestions."
].join("\n"),

'TspotControls':[
 "| tiddlyspot password:|<<option pasUploadPassword>>|",
 "| site management:|<<upload http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/store.cgi index.html . .  " + config.tiddlyspotSiteId + ">>//(requires tiddlyspot password)//<<br>>[[control panel|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/controlpanel]], [[download (go offline)|http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/download]]|",
 "| links:|[[tiddlyspot.com|http://tiddlyspot.com/]], [[FAQs|http://faq.tiddlyspot.com/]], [[announcements|http://announce.tiddlyspot.com/]], [[blog|http://tiddlyspot.com/blog/]], email [[support|mailto:support@tiddlyspot.com]] & [[feedback|mailto:feedback@tiddlyspot.com]], [[donate|http://tiddlyspot.com/?page=donate]]|"
].join("\n"),

'TspotSidebar':[
 "<<upload http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/store.cgi index.html . .  " + config.tiddlyspotSiteId + ">><html><a href='http://" + config.tiddlyspotSiteId + ".tiddlyspot.com/download' class='button'>download</a></html>"
].join("\n"),

'TspotOptions':[
 "tiddlyspot password:",
 "<<option pasUploadPassword>>",
 ""
].join("\n")

});
//}}}

!! [[James Kalbach]] - Designing Web Navigation 
!!! Types of navigation
* Structural navigation
* Associative navigation
** Contextual navigation
** Adaptative navigation
** Quick links
** Footer navigation
* Utility navigation
** Extra-site navigation
** Toolboxes
** Linked logo
** Language selectors
** Country or Region selector
** Internal page navigation
* Navigational pages
* Content pages
* Functional pages

!! [[Alan Cooper]] - About Face 3
* Goal oriented questions
** Goals - What make a good day?
** Opportunities - What current activity wastes your time ?
** Priority - What is most important ?
** Information - What helps you make decisions ?
* System oriented questions
** Function- What are the most common thinks you do with the product?
** Frequency - What part of the product do you use most?
** Preference - What are your favorite aspects of the product? 
** Failure - How do you work around problems?
** Expertise - What shortcuts do you employ?
* Workflow oriented questions
** Process - What did you first do when you came in today?  And then?
** Occurence and recurence
** Exception
* Attitude oriented questions
** Aspiration - What do you see yourself doing in five years from now?
** Avoidance - What do you prefer not to do?
** Motivation - Waht do you enjoy most about your job?

Avec Serif :
Humanistes à axe oblique : Garamond (1561), Times, Scala (bold, italic, caps)
Rationalistes à axe vertical : Baskerville (1750), Didot

Sans Serif (mieux pour l'écran):
Arial, Geneva, Lucida, Trebuchet, Helevetica, Univers (condensed, condensed oblique, condensed bold), DIN

Lisibilité
lorsque les lignes comprennent 26 caractères 
que lorsqu'elle en comprennent 78 
Duchnicky et Kolers (1983) 

'espacement irrégulier des mots 
a un effet plus négatif sur les temps de lecture 
que le non-alignement de la fin de chaque ligne 
(Tullis, 1988).

La lecture des textes en majuscules est 
plus lente que des textes en
majuscules et minuscules. 
car le lecteur reconnait la forme du mot.  
Tinker (1965) 

Ne pas dépasser une densité de 60%. 
Cette mesure de la densité s'effectue 
en comptant les espaces de l'écran
qui sont occupés par un caractère 
et ceux qui restent libres. 
(NASA, 1980)

Eliminer les éléments visuels 
qui n'apportent pas d'information
(Tufte)

| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |
| 14/1/2008 12:43:47 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 13:7:2 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 13:11:2 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 13:13:20 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 13:14:34 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:18:16 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:20:34 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:20:56 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:36:23 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:38:57 | LKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:40:14 | lKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:44:48 | lKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/1/2008 14:47:59 | lKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 14/1/2008 14:52:23 | lKling | [[InteractionDesignWiki.html|file:///Users/kahnasso/!Thematiques/InteractionDesignWiki.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 6/2/2008 18:48:15 | lkling | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 10/4/2008 17:2:21 | lkling | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 28/10/2008 14:14:31 | lkling | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 11/11/2008 11:8:54 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 11/11/2008 11:13:30 | LKling | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 11/11/2008 11:14:48 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 13/11/2008 9:21:10 | lkling | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/10/2009 14:0:29 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 30/11/2009 11:43:36 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 30/11/2009 11:47:33 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 30/11/2009 11:50:40 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 30/11/2009 12:12:46 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 30/11/2009 12:18:8 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 30/11/2009 14:19:29 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 30/11/2009 14:20:1 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 30/11/2009 14:46:26 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 30/11/2009 14:49:56 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 2/12/2009 17:58:10 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 3/12/2009 9:42:17 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 3/12/2009 11:0:57 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 3/12/2009 11:5:21 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 3/12/2009 11:5:46 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 3/12/2009 17:4:1 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 3/12/2009 17:41:55 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 3/12/2009 17:58:52 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 3/12/2009 19:35:45 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 3/12/2009 20:26:34 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 5/12/2009 16:21:29 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 5/12/2009 20:22:54 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 5/12/2009 20:46:15 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 5/12/2009 22:31:15 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 6/12/2009 16:28:34 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 6/12/2009 16:57:56 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 6/12/2009 18:7:48 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 6/12/2009 18:13:49 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 6/12/2009 18:16:9 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 6/12/2009 18:17:36 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 6/12/2009 19:8:36 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 6/12/2009 19:10:40 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 6/12/2009 20:57:6 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 6/12/2009 21:10:45 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 6/12/2009 23:46:47 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 7/12/2009 8:26:6 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 7/12/2009 8:51:44 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 7/12/2009 8:53:29 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 7/12/2009 19:6:13 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 7/12/2009 21:30:3 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 8/12/2009 8:45:2 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 8/12/2009 9:10:24 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 10/12/2009 10:45:30 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 11:51:16 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 17:47:33 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 17:59:0 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 18:24:51 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 19:47:15 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 20:33:14 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 21:3:40 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 21:32:20 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/12/2009 21:46:41 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 11/12/2009 22:51:7 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 12/12/2009 10:43:50 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 12/12/2009 11:12:35 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 12/12/2009 12:9:43 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 12/12/2009 12:18:11 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 12/12/2009 12:23:1 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 13/12/2009 17:27:42 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/12/2009 17:34:19 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 13/12/2009 21:41:51 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/12/2009 21:46:53 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/12/2009 22:15:18 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 14/12/2009 18:29:22 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 14/12/2009 18:35:55 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 14/12/2009 18:50:22 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 16/12/2009 10:56:3 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 16/12/2009 11:57:23 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 16/12/2009 19:18:52 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 17/12/2009 10:50:24 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 17/12/2009 10:51:2 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 17/12/2009 11:30:34 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 17/12/2009 11:52:24 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 17/12/2009 12:0:45 | UserCentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/4/2010 19:22:30 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/4/2010 19:24:43 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 25/4/2010 19:48:12 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/4/2010 19:52:41 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 13/5/2010 10:50:36 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/5/2010 11:16:40 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/5/2010 12:41:56 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/5/2010 12:51:34 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/5/2010 13:2:46 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 13/5/2010 13:3:48 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 27/6/2010 12:59:56 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 27/6/2010 13:0:54 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 21/10/2010 16:34:21 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 13/12/2010 10:6:10 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 2/4/2011 11:0:44 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 3/4/2011 13:39:4 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 10/4/2011 17:27:2 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 10/4/2011 17:29:29 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 12/4/2011 19:14:18 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 26/9/2011 14:11:13 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 19/10/2011 9:25:15 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 19/10/2011 9:31:17 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 22/2/2012 22:20:53 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 22/2/2012 22:21:33 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 22/2/2012 22:49:41 | Usercentered | [[usercentered.html|file:///Users/laurentkling/Downloads/usercentered.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/2/2012 12:4:20 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/2/2012 12:8:0 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/2/2012 12:16:42 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/2/2012 12:20:12 | Usercentered | [[usercentered(1).html|file:///Users/laurentkling/Documents/06_personnel/SitedeLaurent/usercentered(1).html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 25/2/2012 12:27:4 | Usercentered | [[usercentered(1).html|file:///Users/laurentkling/Documents/06_personnel/SitedeLaurent/usercentered(1).html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 25/2/2012 16:22:53 | Usercentered | [[usercentered(1).html|file:///Users/laurentkling/Documents/06_personnel/SitedeLaurent/usercentered(1).html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/2/2012 16:23:50 | Usercentered | [[usercentered(1).html|file:///Users/laurentkling/Documents/06_personnel/SitedeLaurent/usercentered(1).html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 25/2/2012 17:9:18 | Usercentered | [[usercentered(1).html|file:///Users/laurentkling/Documents/06_personnel/SitedeLaurent/usercentered(1).html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 25/2/2012 17:13:53 | Usercentered | [[usercentered(1).html|file:///Users/laurentkling/Documents/06_personnel/SitedeLaurent/usercentered(1).html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 25/2/2012 17:16:6 | Usercentered | [[usercentered(1).html|file:///Users/laurentkling/Documents/06_personnel/SitedeLaurent/usercentered(1).html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 28/3/2012 9:38:9 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 1/11/2012 20:12:21 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 24/5/2013 9:43:4 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 24/5/2013 9:50:7 | YourName | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 24/5/2013 9:51:30 | YourName | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 24/5/2013 9:57:44 | YourName | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 24/5/2013 10:55:44 | YourName | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 24/5/2013 11:3:29 | YourName | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 24/5/2013 11:19:40 | YourName | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 12/7/2013 15:3:4 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 19/7/2013 10:8:12 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . | Ok |
| 19/7/2013 10:13:23 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 1/10/2013 10:42:6 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 1/10/2013 10:43:27 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 24/12/2013 10:3:49 | YourName | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 17/5/2014 19:46:2 | usercentered | [[index.html|http://usercentered.tiddlyspot.com/index.html]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |
| 22/9/2014 15:2:53 | usercentered | [[/|http://usercentered.tiddlyspot.com/]] | [[store.cgi|http://usercentered.tiddlyspot.com/store.cgi]] | . | index.html | . |

/***
<<tiddler UploadPluginDoc>>
!Code
***/
//{{{
version.extensions.UploadPlugin = {
	major: 3, minor: 3, revision: 3, 
	date: new Date(2006,6,30),
	type: 'macro',
	source: 'http://tiddlywiki.bidix.info/#UploadPlugin',
	docs: 'http://tiddlywiki.bidix.info/#UploadPluginDoc'
};
//}}}

////+++!![config.lib.file]

//{{{
if (!config.lib) config.lib = {};
if (!config.lib.file) config.lib.file= {
	author: 'BidiX',
	version: {major: 0, minor: 1, revision: 0}, 
	date: new Date(2006,3,9)
};
config.lib.file.dirname = function (filePath) {
	var lastpos;
	if ((lastpos = filePath.lastIndexOf("/")) != -1) {
		return filePath.substring(0, lastpos);
	} else {
		return filePath.substring(0, filePath.lastIndexOf("\\"));
	}
};
config.lib.file.basename = function (filePath) {
	var lastpos;
	if ((lastpos = filePath.lastIndexOf("#")) != -1) 
		filePath = filePath.substring(0, lastpos);
	if ((lastpos = filePath.lastIndexOf("/")) != -1) {
		return filePath.substring(lastpos + 1);
	} else
		return filePath.substring(filePath.lastIndexOf("\\")+1);
};
window.basename = function() {return "@@deprecated@@";};
//}}}
////===

////+++!![config.lib.log]

//{{{
if (!config.lib) config.lib = {};
if (!config.lib.log) config.lib.log= {
	author: 'BidiX',
	version: {major: 0, minor: 1, revision: 0}, 
	date: new Date(2006,3,9)
};
config.lib.Log = function(tiddlerTitle, logHeader) {
	if (version.major < 2)
		this.tiddler = store.tiddlers[tiddlerTitle];
	else
		this.tiddler = store.getTiddler(tiddlerTitle);
	if (!this.tiddler) {
		this.tiddler = new Tiddler();
		this.tiddler.title = tiddlerTitle;
		this.tiddler.text = "| !date | !user | !location |" + logHeader;
		this.tiddler.created = new Date();
		this.tiddler.modifier = config.options.txtUserName;
		this.tiddler.modified = new Date();
	if (version.major < 2)
		store.tiddlers[tiddlerTitle] = this.tiddler;
	else
		store.addTiddler(this.tiddler);
	}
	return this;
};

config.lib.Log.prototype.newLine = function (line) {
	var now = new Date();
	var newText = "| ";
	newText += now.getDate()+"/"+(now.getMonth()+1)+"/"+now.getFullYear() + " ";
	newText += now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+" | ";
	newText += config.options.txtUserName + " | ";
	var location = document.location.toString();
	var filename = config.lib.file.basename(location);
	if (!filename) filename = '/';
	newText += "[["+filename+"|"+location + "]] |";
	this.tiddler.text = this.tiddler.text + "\n" + newText;
	this.addToLine(line);
};

config.lib.Log.prototype.addToLine = function (text) {
	this.tiddler.text = this.tiddler.text + text;
	this.tiddler.modifier = config.options.txtUserName;
	this.tiddler.modified = new Date();
	if (version.major < 2)
	store.tiddlers[this.tiddler.tittle] = this.tiddler;
	else {
		store.addTiddler(this.tiddler);
		story.refreshTiddler(this.tiddler.title);
		store.notify(this.tiddler.title, true);
	}
	if (version.major < 2)
		store.notifyAll(); 
};
//}}}
////===

////+++!![config.lib.options]

//{{{
if (!config.lib) config.lib = {};
if (!config.lib.options) config.lib.options = {
	author: 'BidiX',
	version: {major: 0, minor: 1, revision: 0}, 
	date: new Date(2006,3,9)
};

config.lib.options.init = function (name, defaultValue) {
	if (!config.options[name]) {
		config.options[name] = defaultValue;
		saveOptionCookie(name);
	}
};
//}}}
////===

////+++!![PasswordTweak]

//{{{
version.extensions.PasswordTweak = {
	major: 1, minor: 0, revision: 2, date: new Date(2006,3,11),
	type: 'tweak',
	source: 'http://tiddlywiki.bidix.info/#PasswordTweak'
};
//}}}
/***
!!config.macros.option
***/
//{{{
config.macros.option.passwordCheckboxLabel = "Save this password on this computer";
config.macros.option.passwordType = "password"; // password | text

config.macros.option.onChangeOption = function(e)
{
	var opt = this.getAttribute("option");
	var elementType,valueField;
	if(opt) {
		switch(opt.substr(0,3)) {
			case "txt":
				elementType = "input";
				valueField = "value";
				break;
			case "pas":
				elementType = "input";
				valueField = "value";
				break;
			case "chk":
				elementType = "input";
				valueField = "checked";
				break;
		}
		config.options[opt] = this[valueField];
		saveOptionCookie(opt);
		var nodes = document.getElementsByTagName(elementType);
		for(var t=0; t<nodes.length; t++) {
			var optNode = nodes[t].getAttribute("option");
			if (opt == optNode) 
				nodes[t][valueField] = this[valueField];
		}
	}
	return(true);
};

config.macros.option.handler = function(place,macroName,params)
{
    var opt = params[0];
	var size = 15;
	if (params[1])
		size = params[1];
    if(config.options[opt] === undefined) {
        return;}
    var c;
    switch(opt.substr(0,3)) {
		case "txt":
			c = document.createElement("input");
			c.onkeyup = this.onChangeOption;
			c.setAttribute ("option",opt);
			c.size = size;
			c.value = config.options[opt];
			place.appendChild(c);
			break;
		case "pas":
			// input password
			c = document.createElement ("input");
			c.setAttribute("type",config.macros.option.passwordType);
			c.onkeyup = this.onChangeOption;
			c.setAttribute("option",opt);
			c.size = size;
			c.value = config.options[opt];
			place.appendChild(c);
			// checkbox link with this password "save this password on this computer"
			c = document.createElement("input");
			c.setAttribute("type","checkbox");
			c.onclick = this.onChangeOption;
			c.setAttribute("option","chk"+opt);
			place.appendChild(c);
			c.checked = config.options["chk"+opt];
			// text savePasswordCheckboxLabel
			place.appendChild(document.createTextNode(config.macros.option.passwordCheckboxLabel));
			break;
		case "chk":
			c = document.createElement("input");
			c.setAttribute("type","checkbox");
			c.onclick = this.onChangeOption;
			c.setAttribute("option",opt);
			place.appendChild(c);
			c.checked = config.options[opt];
			break;
	}
};
//}}}
/***
!! Option cookie stuff
***/
//{{{
window.loadOptionsCookie_orig_PasswordTweak = window.loadOptionsCookie;
window.loadOptionsCookie = function()
{
	var cookies = document.cookie.split(";");
	for(var c=0; c<cookies.length; c++) {
		var p = cookies[c].indexOf("=");
		if(p != -1) {
			var name = cookies[c].substr(0,p).trim();
			var value = cookies[c].substr(p+1).trim();
			switch(name.substr(0,3)) {
				case "txt":
					config.options[name] = unescape(value);
					break;
				case "pas":
					config.options[name] = unescape(value);
					break;
				case "chk":
					config.options[name] = value == "true";
					break;
			}
		}
	}
};

window.saveOptionCookie_orig_PasswordTweak = window.saveOptionCookie;
window.saveOptionCookie = function(name)
{
	var c = name + "=";
	switch(name.substr(0,3)) {
		case "txt":
			c += escape(config.options[name].toString());
			break;
		case "chk":
			c += config.options[name] ? "true" : "false";
			// is there an option link with this chk ?
			if (config.options[name.substr(3)]) {
				saveOptionCookie(name.substr(3));
			}
			break;
		case "pas":
			if (config.options["chk"+name]) {
				c += escape(config.options[name].toString());
			} else {
				c += "";
			}
			break;
	}
	c += "; expires=Fri, 1 Jan 2038 12:00:00 UTC; path=/";
	document.cookie = c;
};
//}}}
/***
!! Initializations
***/
//{{{
// define config.options.pasPassword
if (!config.options.pasPassword) {
	config.options.pasPassword = 'defaultPassword';
	window.saveOptionCookie('pasPassword');
}
// since loadCookies is first called befor password definition
// we need to reload cookies
window.loadOptionsCookie();
//}}}
////===

////+++!![config.macros.upload]

//{{{
config.macros.upload = {
	accessKey: "U",
	formName: "UploadPlugin",
	contentType: "text/html;charset=UTF-8",
	defaultStoreScript: "store.php"
};

// only this two configs need to be translated
config.macros.upload.messages = {
	aboutToUpload: "About to upload TiddlyWiki to %0",
	errorDownloading: "Error downloading",
	errorUploadingContent: "Error uploading content",
	fileNotFound: "file to upload not found",
	fileNotUploaded: "File %0 NOT uploaded",
	mainFileUploaded: "Main TiddlyWiki file uploaded to %0",
	urlParamMissing: "url param missing",
	rssFileNotUploaded: "RssFile %0 NOT uploaded",
	rssFileUploaded: "Rss File uploaded to %0"
};

config.macros.upload.label = {
	promptOption: "Save and Upload this TiddlyWiki with UploadOptions",
	promptParamMacro: "Save and Upload this TiddlyWiki in %0",
	saveLabel: "save to web", 
	saveToDisk: "save to disk",
	uploadLabel: "upload"	
};

config.macros.upload.handler = function(place,macroName,params){
	// parameters initialization
	var storeUrl = params[0];
	var toFilename = params[1];
	var backupDir = params[2];
	var uploadDir = params[3];
	var username = params[4];
	var password; // for security reason no password as macro parameter
	var label;
	if (document.location.toString().substr(0,4) == "http")
		label = this.label.saveLabel;
	else
		label = this.label.uploadLabel;
	var prompt;
	if (storeUrl) {
		prompt = this.label.promptParamMacro.toString().format([this.dirname(storeUrl)]);
	}
	else {
		prompt = this.label.promptOption;
	}
	createTiddlyButton(place, label, prompt, 
						function () {
							config.macros.upload.upload(storeUrl, toFilename, uploadDir, backupDir, username, password); 
							return false;}, 
						null, null, this.accessKey);
};
config.macros.upload.UploadLog = function() {
	return new config.lib.Log('UploadLog', " !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |" );
};
config.macros.upload.UploadLog.prototype = config.lib.Log.prototype;
config.macros.upload.UploadLog.prototype.startUpload = function(storeUrl, toFilename, uploadDir,  backupDir) {
	var line = " [[" + config.lib.file.basename(storeUrl) + "|" + storeUrl + "]] | ";
	line += uploadDir + " | " + toFilename + " | " + backupDir + " |";
	this.newLine(line);
};
config.macros.upload.UploadLog.prototype.endUpload = function() {
	this.addToLine(" Ok |");
};
config.macros.upload.basename = config.lib.file.basename;
config.macros.upload.dirname = config.lib.file.dirname;
config.macros.upload.upload = function(storeUrl, toFilename, uploadDir, backupDir, username, password)
{
	// parameters initialization
	storeUrl = (storeUrl ? storeUrl : config.options.txtUploadStoreUrl);
	toFilename = (toFilename ? toFilename : config.options.txtUploadFilename);
	backupDir = (backupDir ? backupDir : config.options.txtUploadBackupDir);
	uploadDir = (uploadDir ? uploadDir : config.options.txtUploadDir);
	username = (username ? username : config.options.txtUploadUserName);
	password = config.options.pasUploadPassword; // for security reason no password as macro parameter
	if (storeUrl === '') {
		config.macros.upload.defaultStoreScript;
	}
	if (config.lib.file.dirname(storeUrl) === '') {
		storeUrl = config.lib.file.dirname(document.location.toString())+'/'+storeUrl;
	}
	if (toFilename === '') {
		toFilename = config.lib.file.basename(document.location.toString());
	}

	clearMessage();
	// only for forcing the message to display
	 if (version.major < 2)
		store.notifyAll();
	if (!storeUrl) {
		alert(config.macros.upload.messages.urlParamMissing);
		return;
	}
	
	var log = new this.UploadLog();
	log.startUpload(storeUrl, toFilename, uploadDir,  backupDir);
	if (document.location.toString().substr(0,5) == "file:") {
		saveChanges();
	}
	displayMessage(config.macros.upload.messages.aboutToUpload.format([this.dirname(storeUrl)]), this.dirname(storeUrl));
	this.uploadChanges(storeUrl, toFilename, uploadDir, backupDir, username, password);
	if(config.options.chkGenerateAnRssFeed) {
		//var rssContent = convertUnicodeToUTF8(generateRss());
		var rssContent = generateRss();
		var rssPath = toFilename.substr(0,toFilename.lastIndexOf(".")) + ".xml";
		this.uploadContent(rssContent, storeUrl, rssPath, uploadDir, '', username, password, 
			function (responseText) {
				if (responseText.substring(0,1) != '0') {
					displayMessage(config.macros.upload.messages.rssFileNotUploaded.format([rssPath]));
				}
				else {
					if (uploadDir) {
						rssPath = uploadDir + "/" + config.macros.upload.basename(rssPath);
					} else {
						rssPath = config.macros.upload.basename(rssPath);
					}
					displayMessage(config.macros.upload.messages.rssFileUploaded.format(
						[config.macros.upload.dirname(storeUrl)+"/"+rssPath]), config.macros.upload.dirname(storeUrl)+"/"+rssPath);
				}
				// for debugging store.php uncomment last line
				//DEBUG alert(responseText);
			});
	}
	return;
};

config.macros.upload.uploadChanges = function(storeUrl, toFilename, uploadDir, backupDir, 
		username, password) {
	var original;
	if (document.location.toString().substr(0,4) == "http") {
		original =  this.download(storeUrl, toFilename, uploadDir, backupDir, username, password);
		return;
	}
	else {
		// standard way : Local file
		
		original = loadFile(getLocalPath(document.location.toString()));
		if(window.Components) {
			// it's a mozilla browser
			try {
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
				var converter = Components.classes["@mozilla.org/intl/scriptableunicodeconverter"]
									.createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
				converter.charset = "UTF-8";
				original = converter.ConvertToUnicode(original);
			}
			catch(e) {
			}
		}
	}
	//DEBUG alert(original);
	this.uploadChangesFrom(original, storeUrl, toFilename, uploadDir, backupDir, 
		username, password);
};

config.macros.upload.uploadChangesFrom = function(original, storeUrl, toFilename, uploadDir, backupDir, 
		username, password) {
	var startSaveArea = '<div id="' + 'storeArea">'; // Split up into two so that indexOf() of this source doesn't find it
	var endSaveArea = '</d' + 'iv>';
	// Locate the storeArea div's
	var posOpeningDiv = original.indexOf(startSaveArea);
	var posClosingDiv = original.lastIndexOf(endSaveArea);
	if((posOpeningDiv == -1) || (posClosingDiv == -1))
		{
		alert(config.messages.invalidFileError.format([document.location.toString()]));
		return;
		}
	var revised = original.substr(0,posOpeningDiv + startSaveArea.length) + 
				allTiddlersAsHtml() + "\n\t\t" +
				original.substr(posClosingDiv);
	var newSiteTitle;
	if(version.major < 2){
		newSiteTitle = (getElementText("siteTitle") + " - " + getElementText("siteSubtitle")).htmlEncode();
	} else {
		newSiteTitle = (wikifyPlain ("SiteTitle") + " - " + wikifyPlain ("SiteSubtitle")).htmlEncode();
	}
	revised = revised.replace(new RegExp("<title>[^<]*</title>", "im"),"<title>"+ newSiteTitle +"</title>");
	var response = this.uploadContent(revised, storeUrl, toFilename, uploadDir, backupDir, 
		username, password, function (responseText) {
					if (responseText.substring(0,1) != '0') {
						alert(responseText);
						displayMessage(config.macros.upload.messages.fileNotUploaded.format([getLocalPath(document.location.toString())]));
					}
					else {
						if (uploadDir !== '') {
							toFilename = uploadDir + "/" + config.macros.upload.basename(toFilename);
						} else {
							toFilename = config.macros.upload.basename(toFilename);
						}
						displayMessage(config.macros.upload.messages.mainFileUploaded.format(
							[config.macros.upload.dirname(storeUrl)+"/"+toFilename]), config.macros.upload.dirname(storeUrl)+"/"+toFilename);
						var log = new config.macros.upload.UploadLog();
						log.endUpload();
						store.setDirty(false);
					}
					// for debugging store.php uncomment last line
					//DEBUG alert(responseText);
				}
			);
};

config.macros.upload.uploadContent = function(content, storeUrl, toFilename, uploadDir, backupDir, 
		username, password, callbackFn) {
	var boundary = "---------------------------"+"AaB03x";		
	var request;
	try {
		request = new XMLHttpRequest();
		} 
	catch (e) { 
		request = new ActiveXObject("Msxml2.XMLHTTP"); 
		}
	if (window.netscape){
			try {
				if (document.location.toString().substr(0,4) != "http") {
					netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');}
			}
			catch (e) { }
		}		
	//DEBUG alert("user["+config.options.txtUploadUserName+"] password[" + config.options.pasUploadPassword + "]");
	// compose headers data
	var sheader = "";
	sheader += "--" + boundary + "\r\nContent-disposition: form-data; name=\"";
	sheader += config.macros.upload.formName +"\"\r\n\r\n";
	sheader += "backupDir="+backupDir
				+";user=" + username 
				+";password=" + password
				+";uploaddir=" + uploadDir
				+ ";;\r\n"; 
	sheader += "\r\n" + "--" + boundary + "\r\n";
	sheader += "Content-disposition: form-data; name=\"userfile\"; filename=\""+toFilename+"\"\r\n";
	sheader += "Content-Type: " + config.macros.upload.contentType + "\r\n";
	sheader += "Content-Length: " + content.length + "\r\n\r\n";
	// compose trailer data
	var strailer = new String();
	strailer = "\r\n--" + boundary + "--\r\n";
	var data;
	data = sheader + content + strailer;
	//request.open("POST", storeUrl, true, username, password);
	request.open("POST", storeUrl, true);
	request.onreadystatechange = function () {
				if (request.readyState == 4) {
				     if (request.status == 200)
						callbackFn(request.responseText);
					else
						alert(config.macros.upload.messages.errorUploadingContent);
				}
		};
	request.setRequestHeader("Content-Length",data.length);
	request.setRequestHeader("Content-Type","multipart/form-data; boundary="+boundary);
	request.send(data); 
};


config.macros.upload.download = function(uploadUrl, uploadToFilename, uploadDir, uploadBackupDir, 
	username, password) {
	var request;
	try {
		request = new XMLHttpRequest();
	} 
	catch (e) { 
		request = new ActiveXObject("Msxml2.XMLHTTP"); 
	}
	try {
		if (uploadUrl.substr(0,4) == "http") {
			netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
			}
		else {
			netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
		}
	} catch (e) { }
	//request.open("GET", document.location.toString(), true, username, password);
	request.open("GET", document.location.toString(), true);
	request.onreadystatechange = function () {
		if (request.readyState == 4) {
			if(request.status == 200) {
				config.macros.upload.uploadChangesFrom(request.responseText, uploadUrl, 
					uploadToFilename, uploadDir, uploadBackupDir, username, password);
			}
			else
				alert(config.macros.upload.messages.errorDownloading.format(
					[document.location.toString()]));
		}
	};
	request.send(null);
};

//}}}
////===

////+++!![Initializations]

//{{{
config.lib.options.init('txtUploadStoreUrl','store.php');
config.lib.options.init('txtUploadFilename','');
config.lib.options.init('txtUploadDir','');
config.lib.options.init('txtUploadBackupDir','');
config.lib.options.init('txtUploadUserName',config.options.txtUserName);
config.lib.options.init('pasUploadPassword','');
config.shadowTiddlers.UploadPluginDoc = "[[Full Documentation|http://tiddlywiki.bidix.info/l#UploadPluginDoc ]]\n"; 


//}}}
////===

////+++!![Core Hijacking]

//{{{
config.macros.saveChanges.label_orig_UploadPlugin = config.macros.saveChanges.label;
config.macros.saveChanges.label = config.macros.upload.label.saveToDisk;

config.macros.saveChanges.handler_orig_UploadPlugin = config.macros.saveChanges.handler;

config.macros.saveChanges.handler = function(place)
{
	if ((!readOnly) && (document.location.toString().substr(0,4) != "http"))
		createTiddlyButton(place,this.label,this.prompt,this.onClick,null,null,this.accessKey);
}

//}}}
////===

Avoid premature design decisions, keep UI out and focus on actor Intent
A use case is a collection of success and failure scenarios that describe actors using a system to support a goal, and that yields observable results of value to the actor.It is a functional requirement that describes what the system must do, not how.
*Parts of a use case :
**Stakeholders and interest list
**preconditions (use case précédent)
**success
**Happy path scenario
**alternate flows
**special requirements (screen, langage ...)
*Granularity of  use case : a task performed by one person, in one place at one time, in response to a business event, which adds measurable business value (se logger n'apporte pas de business value) and leaves the data in consistent state.
*Choose use cases by finding user goals : by asking, what are your goals? & what are the goals of your goal? raise to highest user goal level for each primary actors
**system boundaries
**identify primary actors
**user goals for each
**define use cases

User Research - As we create designs, we need to ensure they meet the needs of the user. User research helps us collect information about who our users are, what they are trying to accomplish, what frustrates them, and what will delight them. Skills include identifying user population; techniques for evaluating design ideas, such as [[Test]]; and passing that information on to rest of the team members, so they can be making informed decisions.
!!Exemples of user needs
**Finding some fact or object
**Learning something
**Controlling or monitoring something
**Being entertained
**Creating something
**Conversing with other people
!!Méthodes de User Research
*Analyse des données
**Statistiques d’utilisation UserStatistics
**Résultats d’enquêtes et base du service support
**Données marketing
*Analyse des tâches par [[Interviews Utilisateurs]]
*[[Test]]

Sodexho
Il existe des Programme/site de réalisation de questionnaires en ligne

!! [[Jenifer Tidwell]] - Designing Interfaces - Users patterns 
*Safe exploration 'Let me explore without getting lost or getting into trouble'
*Instant gratification 'I want to accomplish something now, not later'
*Satisfacing 'This is good enough. I don't want to spend more time learning to do it better.' 
*Changes in midstream 'I changed my mind about what I was doing'
*Deferred choices 'I don't want to answer that now; just let me finish'
*Incremental construction 'Let me change this. That doesn't look right; let me change it again. That's better.'
*Habituation 'That gesture works everywhere else, why doesn't it work here to?'
*Spatial memory 'I swear that button was there a minute ago. Where did it go?'
*Prospective memory 'I'm putting this there to remind myself to deal with it later.'
*Streamlined repetition 'I have to repeat this how many times?'
*Keyboard only 'Please don't make me use the mouse'
*People's advice 'What did everyone has to say about that?'

Dans un ContentManagementSystem, si la validation 
*se fait au niveau de chaque contenu: il est orienté 'contenu' voire 'référentiel de contenu' (SPIP, Joomla)
*Sinon il est orienté 'page' (Typo3, Jahia, ce qui donne des CMS plus 'orientés affichage' que 'contenu')

Les intervenants doivent être avertis par mail des tâches qui leur incombent, et doivent d'un click pouvoir consulter la listes des articles qui attendent validation.

Article créé, validé, publié, doit pouvoir être modifié : besoin d'un système de gestion des versions permettant d'avoir plusieurs états simultanés pour un même contenu. Tracabilité des modifications, par qui, et des modifications de fichiers joints ou des images.

Ex ROCHE de Gouvernance :
décisionnel : comité de direction : stratégie web intégrée avec stratégie de l'entreprise
fonctionnel : comité de pilotage :  formalisation de la stratégie, détermination des ressources, détermination des territoires de responsabilité (MOA-MOE-MUE)
éditorial : plateau opérationnel : administration du dispositif de contribution, comité éditorial, animation de la communauté des contributeurs.
opérationnel : 20 contributeurs + valideurs (niveau n+1)

One hallmark of good design is having a strong visual appearance. This is more than just aesthetic goodness, stretching into ensuring the priority of information is communicated visually -- the most important information jumps off the screen while more subtle details are visible, yet not demanding unwarranted attention. Visual design skills include page layout, form design, color selection, and icon design. (While not directly "visual", we consider designing for accessibility to fall into this skillset, as it focuses on much the same issues.)
Le design graphique est construit sur une fondation saine, c’est à dire une architecture de l’information validée. Les cartes et gabarits de pages servent de cadre précis à la création graphique pour qu’aucun besoin fonctionnel ne soit oublié.
Pour éviter de douloureuses remises en cause, nous élaborons le graphisme en partant des gabarits de pages les plus complexes dans les situations les plus extrêmes. Généralement, ce sont des écrans en profondeur dans le site ou l’application, et non pas la page d’accueil. Le système visuel est ensuite décliné pour les autres pages, plus simples.
Pour satisfaire l’utilisateur, le graphisme doit assurer cohérence et prédictabilité avec des règles intuitives et systématiques. C’est pourquoi nous concevons en premier lieu une grille et un zonage qui seront partagés par l’ensemble des pages. D’autres choix sont réalisés dès cette étape : la gamme harmonique des couleurs et la typographie. Ces éléments doivent communiquer votre identité mais aussi permettre de clarifier l’information malgré la faible résolution et la diversité des écrans d’ordinateurs.
Nous travaillons sur des services en ligne à haute densité d’information. Pour ces services, le plus important reste le contenu. L’interface doit rester la plus sobre et transparente possible pour l’utilisateur, par opposition aux interfaces ludiques. Notre démarche a pour but d’améliorer le confort de consultation, plutôt que de créer une émotion. Les éléments graphiques choisis ne serviront pas d’ornement mais à clarifier la lecture. Heureusement ce parti pris ne s’oppose pas à l’élégance.
!!!!Le problème :
**Quelles couleurs, typographie et formes choisir pour assurer l'ergonomie de la future interface tout en restant attractif et en respectant l'identité de l'IRSN ?
!!!!Objectif : Construire le graphisme de la future interface.
!!!!Information recherchée :
**Chartes graphiques existantes.
**Contexte d'utilisation (intégration visuelle avec le reste de l'Intranet).
!!!!Rôle de K+A :
**Proposer des maquettes graphiques.
**Le graphisme est construit à partir des gabarits de page les plus complexes pour être décliné ensuite aux pages plus simples.
!!!!Livrables : Maquette graphique de 5 fenêtres au format PSD (Photoshop) et icônes au format GIF.
Voir
**Composition ou GridDesign
**VariablesDeBertin
**TypoGraphy

3_ Fixer les tâches que l'application permet de réaliser

	Le problème :
		Comment construire un enchaînement de tâches qui réponde à tous les différents scénarios à la fois ?

	Objectif :
		Fixer l'enchaînement des tâches que la future interface doit permettre de réaliser.

	Information recherchée :
		Importance relative des différentes  tâches potentielles.

	Rôle de K+A
		Animer la deuxième réunion du groupe de travail "utilisateur final", pour les aspects liés à l'IHM.
		Proposer un hiérarchie et un enchaînement des tâches.

	Livrable : 
		 Diagramme d'enchaînement des tâches au format PDF.

	Implication attendue du client :
		Arbitrage entre les différentes tâches potentielles.

	Calendrier :
		3 jours après les interviews.

--------------------------------------------------------------------------------------

!! Novak, Hoffman and Yung, 1999
1. Causes of Flow
* A clear goal
* Immediate feedback on the success of attempts to reach that goal
* A challenge you’re confident you have the skills to handle

2. Characteristics of Flow
* Total concentration and focused attention
* A sense of control over interactions
* Openness to new things
* Increased exploratory behavior
* Increased learning
* Positive feelings

3. Consequences of Flow
* Loss of consciousness of self
* Distortions in the perception of time
* Activity is perceived as intrinsically rewarding

!! [[Bastien & Scapin]]
* 4.2. Prise en compte de l’expérience de l’utilisateur

!! Olivier Duffez - Webrankinfo
Dans la balise <title>
* Inclure des mots-clés : Votre titre doit absolument contenir vos mots-clés les plus importants. En général le titre de la page d'accueil correspond au nom du site, suivi éventuellement d'un petit slogan. Mettez de préférence les mots les plus importants au début.
* Personnaliser chaque titre : Il est également primordial de ne pas répéter le même titre sur toutes vos pages. D'une part parce que vous perdez la possibilité de varier les mots-clés, et d'autre part parce que si plusieurs pages de votre site sortent en résultats d'un moteur, l'internaute risque de ne pas les visiter toutes, pensant qu'il s'agit de la même chose.
* Longueur optimale d'un titre : Au sujet de la longueur maximale (ou optimale) de la balise TITLE, on conseille souvent de se limiter à environ 65 caractères. Ce n'est pas une limite absolue puisque des moteurs comme Google tiennent compte de plusieurs centaines de caractères, mais c'est en bonne partie parce que seuls les 65 caractères s'affichent dans les pages de résultats des moteurs de recherche.
* Position des mots-clés : Tant qu'à faire, il vaut mieux placer les mots les plus stratégiques pour la page en début de titre, plutôt qu'à la fin (critère de proéminence). Si vous souhaitez faire apparaître votre marque ou le nom du site, mettez-le plutôt en fin de titre, à moins que la notoriété de la marque soit telle que les internautes cliqueront davantage pour visiter vos pages…