View
47
Download
6
Category
Tags:
Preview:
DESCRIPTION
Designer l'Experience UtilisateurPrésenté à :- L'Ecole de Communication de SciencesPo Paris.- Ecole de Commerce EDC - Paris La Défense.2009
Citation preview
UXD
Designerl’expérienceutilisateur
lundi 23 novembre 2009
“ Quand vous abordez un problème et qu’il apparait vraiment simple, ce que vous n’en comprenez pas la compléxité. Puis, vous vous y plongez et vous voyez alors que c’est très compliqué, et vous imaginez toutes sortes de solutions alambiquées.
Ça, c’est un peu le milieu du chemin, et c’est là que la plupart des gens s’arrète...
Mais la personne vraiment forte continuera et trouvera la clé, le principe soujacent du problème — et inventera une solution magnifique, élégante et qui fonctionne.”
Steve Jobs, 1984
lundi 23 novembre 2009
ContexteUXD
lundi 23 novembre 2009
Contexte technologiqueRacines
lundi 23 novembre 2009
INFORMATION SCIENCES
COMPUTER SCIENCES
lundi 23 novembre 2009
INFORMATION SCIENCES
COMPUTER SCIENCES
lundi 23 novembre 2009
INFORMATION SCIENCES
COMPUTER SCIENCES
Traduit en français par “Sciences Informatiques” : étude des fondations théoriques de l’information et du calcul automatisé, et des techniques pratiques de leur implémentation et application dans les systèmes informatiques.
lundi 23 novembre 2009
COMPUTER SCIENCES
➡ 2400 BC : The abacus - the first known calculator (Babylonians )
➡ 500 BC : First known use of zero by mathematicians
➡ 500 BC : Indian grammarian Panini formulated the grammar of Sanskrit
➡ 200 BC : The Chinese invented the suanpan (Chinese abacus)
➡ 125 BC : Machine d'Anticythère : calculatrice mécanique antique permettant de calculer des positions astronomiques.
➡ 100 BC : Chinese mathematicians first used negative numbers.
➡ 60 : Heron of Alexandria made numerous inventions, including "Sequence Control" in which the operator of a machine set a machine running, which then follows a series of instructions in a deterministic fashion. This was, essentially, the first program.
➡ 600 : Indian mathematician Brahmagupta was the first to describe the modern place-value numeral system (Hindu-Arabic numeral system).
➡ 724 : Chinese inventor Liang Lingzan built the world's first fully mechanical clock;
➡ 820 : Persian mathematician, Muḥammad ibn Mūsā al-Ḵwārizmī, described the rudiments of modern algebra
➡ 1000 : Abū Rayhān al-Bīrūnī invented the Planisphere, an analog computer.
lundi 23 novembre 2009
COMPUTER SCIENCES
➡ 1400 : Kerala school of astronomy and mathematics in South India invented the floating point number system.
➡ 1400 : Jamshīd al-Kāshī invented the Plate of Conjunctions, an analog computer instrument used to determine the time of day at which planetary conjunctions will occur, and for performing linear interpolation.
➡ 1588 : Joost Buerghi discovered natural logarithms.
➡ 1623 : Wilhelm Schickard of Tübingen, Württemberg (now in Germany), built the first discrete automatic calculator, and thus essentially began the computer era. His device was called the "Calculating Clock"
➡ 1642 : French mathematician Blaise Pascal built a mechanical adding machine.
➡ ...
➡ 1936 : Alan Turing of Cambridge University, England, published a paper on 'computable numbers'
➡ 1940 : At Bell Labs, Samuel Williams and George Stibitz complete a calculator which can operate on complex numbers, and give it the imaginative name of the 'Complex Number Calculator'
➡ 1943 : The Colossus was built, by Dr Thomas Flowers at The Post Office Research Laboratories in London, to crack the German Lorenz (SZ42) cipher. It contained 2400 vacuum tubes for logic and applied a programmable logical function to a stream of input characters
➡ 1944 : The IBM ASCC (Automatic Sequence Controlled Calculator) is turned over to Harvard University, which calls it the Harvard Mark I It was designed by Howard Aiken and his team, financed and built by IBM —it became the second program controlled machine (after Konrad Zuse's). The whole machine was 51 feet (16 m) long, weighed 5 (short) tons (4.5 tonnes), and incorporated 750,000 parts.
➡ 1949, May 6 : This is considered the birthday of modern computing. Maurice Wilkes and a team at Cambridge University executed the first stored program on the EDSAC computer, which used paper tape input-output
lundi 23 novembre 2009
Theoretical computer science
Algorithms and data structures
Programming methodology and languages Compilers Programming languages
Computer elements and architecture Digital logic Microarchitecture Multiprocessing
Numerical and symbolic computation Bioinformatics Cognitive Science Computational chemistry Computational neuroscience Computational physics Numerical algorithms Symbolic mathematics
Applications Operating systems Computer networks Computer graphics Computer vision Databases Computer security Artificial intelligence Robotics Human–computer interaction Ubiquitous computing
COMPUTER SCIENCES
lundi 23 novembre 2009
INFORMATION SCIENCES
COMPUTER SCIENCES
lundi 23 novembre 2009
INFORMATION SCIENCES
COMPUTER SCIENCES
Science interdisciplinaire principalement concernée par la collection, le classement, la manipulation, le stockage, la recherche et la diffusion d'information.
lundi 23 novembre 2009
INFORMATION SCIENCES
“Classical categorization comes to us first from Plato, who, in his
Statesman dialogue, introduces the approach of grouping
objects based in their similar properties. This approach was further explored and systematized by Aristotle in his
Categories treatise, where he analyzes the differences between
classes and objects.”
PLATON(428 - 348 av.J.C.)
lundi 23 novembre 2009
“Paul Marie Ghislain Otlet (23 August 1868 in Brussels, Belgium – 10 December 1944) was an author, entrepreneur, visionary, lawyer and peace activist; he is one of several people who have been considered
the father of information science, a field he called "documentation". Otlet created the Universal Decimal Classification, one of the most
prominent examples of faceted classification.
He envisioned later technical innovations but also projected a global vision for information and information technologies that speaks directly to postwar visions of a global "information society."
Otlet not only imagined that all the world's knowledge should
be interlinked and made available remotely to
anyone, but he also proceeded to build a structured document
collection. This collection involved standardized paper sheets and
cards filed in custom-designed cabinets according to a hierarchical index (which culled information worldwide from diverse sources) and a
commercial information retrieval service (which
answered written requests by copying relevant information from index cards). Users of this service were even warned if their query was likely to produce more than 50 results per search.”
Paul Marie Ghislain Otlet (1868 - 1944)
http://en.wikipedia.org/wiki/Paul_Otlet
INFORMATION SCIENCES
lundi 23 novembre 2009
“Sir Timothy John "Tim" Berners-Lee, OM, KBE, FRS, FREng, FRSA (London, 8 June 1955), is a British engineer and computer scientist and
MIT professor credited with inventing the World Wide Web, making
the first proposal for it in March 1989. On 25 December 1990, with the help of Robert Cailliau and a young student staff at CERN, he
implemented the first successful communication
between an HTTP client and server via the Internet.
Berners-Lee is the director of the World Wide Web Consortium (W3C), which oversees the Web's continued development. He is also the founder of the World Wide Web Foundation, and is a senior researcher and holder of the 3Com Founders Chair at the MIT Computer Science and Artificial Intelligence Laboratory (CSAIL).[3] He is a director of The Web Science Research Initiative (WSRI),[4] and a member of the advisory board of the MIT Center for Collective Intelligence.”
Timothy Berners-Lee(1955 - )
http://en.wikipedia.org/wiki/Tim_Berners-Lee
INFORMATION SCIENCES
lundi 23 novembre 2009
BibliometricsData modelingDocument managementGroupwareInformation architectureInformation ethicsInformation retrievalInformation societyInformation systemsIntellectual propertyKnowledge managementKnowledge engineeringPersonal information managementSemantic web
INFORMATION SCIENCES
lundi 23 novembre 2009
Contexte technologiqueLa boucle de l’innovation
lundi 23 novembre 2009
Usages
TechnologieTechnologie
Usages
Usages
Technologie
Usages
TechnologieTechnologie
UsagesUsages
Technologie
TEMPS
lundi 23 novembre 2009
Réseaux sociaux
APIW3C
Blogs
Usages
Technologie
Usages
TechnologieTechnologie
UsagesUsages
Technologie
TEMPS
lundi 23 novembre 2009
WEB 1
lundi 23 novembre 2009
WEB 1 WEB 2
VOUS ETES ICI
lundi 23 novembre 2009
Contexte technologiqueCartographie
lundi 23 novembre 2009
WEB
INFORMATION SCIENCES
COMPUTER SCIENCES
INFORMATIONNEL /DOCUMENTAIRE /
/ PRESSE
CINEMA / TELEVISION
PHOTO / VIDEO / ARTS
GRAPHIQUES
COMMERCE /MARKETING /
PUBLICITE
JEUX /MULTIMEDIA /
CD-ROM
POLITIQUE /SOCIAL /
INSTITUTIONNEL
ETC.
lundi 23 novembre 2009
.COM WEB
INFORMATION SCIENCES
COMPUTER SCIENCES
lundi 23 novembre 2009
.COM
WEBAUDIOVISUEL
WEBINFORMATIONNEL
INFORMATION SCIENCES
COMPUTER SCIENCES
lundi 23 novembre 2009
INFORMATIONNELAUDIOVISUEL
• Privilégie le fond• Standardisé• Recherche verticale• Emmersif• Organisation• Intemporalité
• Privilégie la surface• Propriétaire• Recherche horizontale• Immersif• Découverte• Notion de temps
lundi 23 novembre 2009
INFORMATIONNELAUDIOVISUEL
DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA
DIVERTISSEMENTMONDES VIRTUELS
WEB 1.0
Showtime.com Candystand.com AOL.com Usenet Info.cern.chMaze
lundi 23 novembre 2009
wikipedia
WoWarcraft DailymotionLast.fmVuitton Voyages
second life
Ebay Blogs / NewsFacebook
AUDIOVISUELINFORMATIONNEL
lundi 23 novembre 2009
Audiovisuel Informationnel
wikipedia
WoWarcraft Joost You TubeLast.fmVuitton Voyages
second life
NYT.comEbay BlogsFacebook
Wikipedia.comSecond Life
lundi 23 novembre 2009
Audiovisuel Informationnel
wikipedia
WoWarcraft You TubeLast.fmVuitton Voyages
second life
Ebay Blogs / NewsFacebook
vuitton.com - voyages Guardian.co.uk
lundi 23 novembre 2009
Audiovisuel Informationnel
wikipedia
WoWarcraft Joost You TubeLast.fmVuitton Voyages
second life
NYT.comEbay BlogsFacebook
Last.fm Dailymotion.com
lundi 23 novembre 2009
Audiovisuel Informationnel
wikipedia
WoWarcraft Joost You TubeLast.fmVuitton Voyages
second life
NYT.comEbay BlogsFacebook
Last.fmDailymotion.com/jukebox3d
lundi 23 novembre 2009
• Privilégie le fond• Standardisé• Recherche verticale• Emmersif• Organisation• Intemporalité
• Privilégie la surface • “Propriétaire”• Recherche horizontale• Immersif• Découverte• Notion de temps
Audiovisuel Informationnel
DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA
DIVERTISSEMENTMONDESVIRTUELS
lundi 23 novembre 2009
INFORMATIONNELAUDIOVISUEL
DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA
DIVERTISSEMENTMONDESVIRTUELS
WEB 1.5
lundi 23 novembre 2009
AUDIOVISUEL
DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA
DIVERTISSEMENTMONDESVIRTUELS
?INFORMATIONNEL
lundi 23 novembre 2009
AUDIOVISUEL
DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA
DIVERTISSEMENTMONDESVIRTUELS
INFORMATIQUELOGICIELLE
(OPEN SOURCE)
INFORMATIONNEL
lundi 23 novembre 2009
AUDIOVISUEL
DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA
DIVERTISSEMENTMONDESVIRTUELS
WEB 2.0
APPLICATIF
INFORMATIONNEL
lundi 23 novembre 2009
AUDIOVISUEL
DOCUMENTAIRECOMMUNAUTAIRETRANSACTIONNELCULTURE ET MEDIA
DIVERTISSEMENTMONDESVIRTUELS
APPLICATIF
Desktop Application
Rich Desktop Application
Rich Internet Application
INFORMATIONNEL
lundi 23 novembre 2009
Audiovisuel Informationnel
second life wikipedia
iTunes
Applicatif
Desktop Application
Rich Desktop Application
Rich Internet Application
Ebay Desktop
Google Docs
Google Earth
WoWarcraft Last.fmVuitton Voyages
Dailymotion Ebay Blogs / NewsFacebook
Outils de publication web
lundi 23 novembre 2009
Logiciel Informationnel
second life wikipedia
NYT.comEbay BlogsFacebookWoWarcraft Joost You TubeLast.fmVuitton Voyages
iTunes
Applicatif
Ebay Desktop
Google Docs
lundi 23 novembre 2009
Logiciel Informationnel
second life wikipedia
NYT.comEbay BlogsFacebookWoWarcraft Joost You TubeLast.fmVuitton Voyages
iTunes
Applicatif
Ebay Desktop
Google Docs
lundi 23 novembre 2009
Audiovisuel Informationnel
second life wikipedia
iTunes
Applicatif
Desktop Application
Rich Desktop Application
Rich Internet Application
Ebay Desktop
Google Docs
Google Earth
WoWarcraft Last.fmVuitton Voyages
Dailymotion Ebay Blogs / NewsFacebook
Outils de publication web
lundi 23 novembre 2009
Logiciel Informationnel
second life wikipedia
NYT.comEbay BlogsFacebookWoWarcraft Joost You TubeLast.fmVuitton Voyages
iTunes
Applicatif
Ebay Desktop
Google Docs
lundi 23 novembre 2009
Audiovisuel Informationnel
Applicatif
lundi 23 novembre 2009
Contexte métierProfils en T
lundi 23 novembre 2009
Audiovisuel Informationnel
Applicatif
lundi 23 novembre 2009
FORME FOND
FONCTION
DESIGN WEB
lundi 23 novembre 2009
FORME FOND
FONCTION
DESIGN WEB
CONTENUS &ARCHITECTURE
REALISATION &DEVELOPPEMENT
INTERACTION &INTERFACE
lundi 23 novembre 2009
Le design Web nécessite une démarche d’élaborationpluri-disciplinaire et, par conséquent, des intervenants
aux profils “en forme de T” (T-shaped people).
Tlundi 23 novembre 2009
T-shaped (TEE-shaypt) adj. Posséder une compétence ou une connaissance qui soit à la fois en profondeur et en largeur.
Être “T-shaped” (en forme de T) signifie avoir un noyau de compétences et une connaissance approfondie dans un domaine (la tige du T), mais également un haut niveau de curiosité, de sensibilité et d’aptitudes permettant de se diversifier rapidement et d’atteindre une bonne compréhension générale d’autres domaines (la barre transversale du T).
Tlundi 23 novembre 2009
Contexte métierLes métiers du design interactif
lundi 23 novembre 2009
Graphiste(s) Développeur(s)
+
Chef de projet
Industrialisation du digitalNaissance d’un nouveau paradigme métier
Années 90
lundi 23 novembre 2009
Designer d’interface
+
Developpeur AS3
+Architecte
d’informationDesigner
d’interaction
+Expert
utilisabilité
+Stratégie
des contenus
+Developpeur
Back
+Developpeur
Front
+Developpeur DOM / CSS
Flash Motion designer
+
Chef de projet
+
UX
Industrialisation du digitalNaissance d’un nouveau paradigme métier
Années 2000
lundi 23 novembre 2009
Contexte métierElements de l’expérience utilisateur
lundi 23 novembre 2009
strategie
périmêtre
structure
squellette
surfacehttp://www.jjg.net/elements/
Les 5 éléments de l’expérience utilisateur
lundi 23 novembre 2009
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James Garrettjjg@jjg.net
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
strategie
périmêtre
structure
squellette
surface
lundi 23 novembre 2009
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James Garrettjjg@jjg.net
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
lundi 23 novembre 2009
IA❖ Parcours utilisateurs
❖ Organisation de contenu
❖ Wireframes
❖ Plannification fonctionnelle
IxD❖ Modélisation des objets
❖ Comportement d’interface
❖ Organisation des gabarits
❖ Spéc. fonctionnelles
❖ Process Flow
UID❖ Design d’interface
❖ Spécifications graphiques
❖ Catalogue d’objets
Usability❖ Conception des tests
❖ Recommandation et
rapport d’utilisabilité
Prototype❖ Composants Front Flash
❖ Gabarits XHTML
❖ Charte CSS
❖ Librairie d’objets
UX Strategy❖ Definition des besoins
❖ Etude de contextes d’usage
❖ Strategie fonctionnelle
❖ Strategie des contenus
UX DESIGN
lundi 23 novembre 2009
StratégieUXD
lundi 23 novembre 2009
Recherches utilisateurs
lundi 23 novembre 2009
Analytics
Web analytics : termes désignant la mesure, la collecte, l’analyse et la présentation de données internet dans le but de comprendre et d’optimiser les usages d’un dispositif web.
lundi 23 novembre 2009
Analytics
lundi 23 novembre 2009
Qu’est-ce que le design centré utilisateur ?
Le design centré utilisateur est une philosophie du design et un processus au sein desquels les besoins, les désirs, et les limitations des utilisateurs d’une interface font l’objet d’une attention entière à chaque étape du processus de design.
lundi 23 novembre 2009
Qualitatif(insights)
Quantitatif(validation)
Buts et attitudes(ce qu’ils disent)
Comportement(ce qu’ils font)
Interviews utilisateurs
Tests d’utilisabilité
Sondagesutilisateurs
Analyses de traffic & logs
lundi 23 novembre 2009
L’interview utilisateur est une méthode permettant de découvrir des faits et des opinions d’utilisateurs finaux potentiels du système à concevoir. Les interview sont en général menés en face-à-face, un utilisateur pour un interviewer à la fois.
Interview utilisateur
lundi 23 novembre 2009
Le sondage utilisateur a pour objectif de recueillir des informations auprès d’un panel d’utilisateur, au moyen d’un questionnaire papier ou électronique, sur des points permettant l’amélioration d’un produit dans le cadre de sa conception.
Sondage utilisateur
lundi 23 novembre 2009
Les tests d’utilisabilité sont basés sur l’observation directe d’utilisateurs spécifiques du produit. Cette méthode permet de recueillir des informations sur l’utilisabilité d’une interface pendant que les taches prédéfinies sont effectuées.
Test d’utilisabilité
lundi 23 novembre 2009
Persona
Personnes fictives créées pour représenter les différents types d’utilisateurs au sein d’une cible demographique identifiée succeptible d’utiliser un site ou un produit.
lundi 23 novembre 2009
Persona
lundi 23 novembre 2009
Méthodes de conception
lundi 23 novembre 2009
“The best way to get a good idea is to get a lot of ideas.”
Linus PaulingPrix Nobel de Chimie pour la découverte de l’ADN
lundi 23 novembre 2009
Brainstorming
Le brainstorming consiste à rassembler des personnes afin de générer le plus grand nombre d’idées possibles afin de trouver des solutions à une problématique donnée.
La méthode de brainstorming appellée Cartographie des idées est la plus efficace en termes de conception.
lundi 23 novembre 2009
Brainstorming
lundi 23 novembre 2009
Focus groups
Le Focus Group consiste à soumettre des idées à un ensemble d’utilisateurs (entre 5 et 10) et à enregistrer leur réactions et leurs commentaires.
lundi 23 novembre 2009
Workshop
Le workshop consiste à rassembler des personnes (3 ou 4) impliquées dans un projet pour une séance de conception de groupe. L’objectif est trouver des solutions consolidées plus rapidement à des problématiques précises.
Les problématiques pouvant être traitées en workshop sont variées : design stratégie, persona, parcours utilisateurs, contenu, fonctionnalités, interaction, structure...
lundi 23 novembre 2009
Workshop
lundi 23 novembre 2009
Workshop
lundi 23 novembre 2009
Workshop
lundi 23 novembre 2009
Scénario utilisateur
lundi 23 novembre 2009
Scénario utilisateur (de contexte)
Le scénario utilisateur est le récit de l’usage fait par un persona d’un service ou d’un produit dans un contexte de vie défini.
Le scénario de contexte se concentre sur la façon dont le produit peut aider l’utilisateur à atteindre son but et non pas sur le fonctionnement du produit.
lundi 23 novembre 2009
3. Stratégie / scénario utilisateur
lundi 23 novembre 2009
3. Stratégie / scénario utilisateur
lundi 23 novembre 2009
3. Stratégie / scénario utilisateur
lundi 23 novembre 2009
3. Stratégie / scénario utilisateur
lundi 23 novembre 2009
Framework
lundi 23 novembre 2009
Framework
Un framework est une structure conceptuelle fondamentale utilisée pour traiter ou résoudre des sujets complexes. Dans le contexte du design web, un framework est souvent représenté sous la forme d’un schéma qui sert à la fois de stratégie des moyens et de plan directeur. C’est à la fois un guide et un outil.
lundi 23 novembre 2009
lundi 23 novembre 2009
Corolle Kinra Girls
Intimate
Extimate
My accountMy profileMy avatar
My bedroomThe schoolAdventure places
MembersFriends
Edutainment modulesMediaGames
2
3
4
1
Who I am
Where I go
Who I meet
What I do
mardi 21 juillet 2009
lundi 23 novembre 2009
Modèle conceptuel
lundi 23 novembre 2009
Modèle conceptuel
Un concept est une modélisation multidimensionnelle d’objets abstraits.
lundi 23 novembre 2009
2. 4 axes de conception / Conception stratégique / Schéma conceptuel
3. Stratégie / modèle conceptuel
lundi 23 novembre 2009
Interaction
Inve
stig
atio
nB
uild
Com
munities
Navigation
Custo
m N
avigaion
Explo
ratio
n
Characters Adventu
res
Generate C
ontent
Educa
tive
Le
arni
ngCasu
al P
lay
Explore a
Campus place
Explore a
Theme place
Explore a
Objects
?
Bookmarked
Place
Popular Places
View an
edutainment module
ABCABC
View a Kinra Media
View a Educative Media
create
my Avatar
create my
Bedroom
customize
my Bedroom
complete my
Preferences
customize
my Avatar
Navigation map
Navigation Lists
and menus
Shortcuts
Last visited
See a member’s
Profile
Visit my
neighbors’ profile
See who’s online
Chat
Join a Group / Club
Invite "real" Friends
Add a Member
as Friend
Send Message
to Friend
Send a Gift to FriendWrite a note on
a member’s Board
Participate in an enigma
Make an artistic creation
Update my miniblog
Share pictures
Participate in a Quizz
Play a
single-player game
Play a
multi-player game
Read / Listen to
a Kinra Story
create my
Account
create my
Profile
lundi 23 novembre 2009
EXPLORER & CHOISIR
ACHETER & ORGANISER
PREPARER &S’AMUSER
PARTAGER & PARTICIPER
HERTACYCLE DE L’EXPERIENCE UTILISATEUR
Basique
Avancé
EXPLORER
• Pizza• Tartes• Gateaux
CREER
Whislistfamiliale
ENREGISTRER
Préférencespersonnelles
COMPOSER PAR
• Ingredients• Occasion• Membre famille
Avancé
BasiqueFOLLOW
CoachCOOK WITH
Real-time wizard
ASIGN
RolesSWITCH
Parent/childmodes
Basique Avancé
ORGANISER
Shopping list
ORGANISER
• ToDo list• Rappel
EXPORTER
• Impression• Email
EXPORTER
• Mobile• Calendrier
Avancé Basique
SERVICE PARTENAIRE
• Commande• Livraison
PARTICIPER SUR
Herta community
PUBLIER SUR
Réseaux sociaux
JOUER
ConcoursPARTICIPER SUR
Facebook Fan Page
lundi 23 novembre 2009
Cas : Peclers Paris
3. Stratégie / modèle conceptuel
lundi 23 novembre 2009
3. Stratégie / modèle conceptuel
lundi 23 novembre 2009
3. Stratégie / modèle conceptuel
lundi 23 novembre 2009
3. Stratégie / modèle conceptuel
lundi 23 novembre 2009
3. Stratégie / modèle conceptuel
lundi 23 novembre 2009
3. Stratégie / modèle conceptuel
lundi 23 novembre 2009
Contenus
lundi 23 novembre 2009
Stratégie des contenusVue d’ensemble
lundi 23 novembre 2009
• stratégie éditoriale• rédaction interactive• SEO (optimisation des moteurs de recherche)• stratégie de la gestion des contenus• stratégie des canaux de distribution
Vue d’ensemble
lundi 23 novembre 2009
Stratégies des contenusFramework éditorial
lundi 23 novembre 2009
Un framework est une structure conceptuelle fondamentale utilisée pour traiter ou résoudre des sujets complexes.
Un framework éditorial permet d’établir des repères conceptuels qui guideront la production des contenus tout au long de leur cycle de vie.
Framework éditorial
lundi 23 novembre 2009
Framework éditorial
lundi 23 novembre 2009
Framework éditorial
lundi 23 novembre 2009
Framework éditorial
lundi 23 novembre 2009
Framework éditorial
lundi 23 novembre 2009
Framework éditorial
lundi 23 novembre 2009
Framework éditorial
lundi 23 novembre 2009
Framework éditorial
lundi 23 novembre 2009
Stratégies des contenusMatrice éditoriale
lundi 23 novembre 2009
Une matrice éditoriale est une grille de répartition des types de contenus selon des critères structurants : thèmatiques, formats, rubriques, périodicité...C’est un outil de plannification qualitative des contenus.
Une matrice éditoriale permet :• de faire surgir des déséquilibres conceptuels• de guider la production des contenus
Matrice éditoriale
lundi 23 novembre 2009
lundi 23 novembre 2009
lundi 23 novembre 2009
Confident and independant.
Mum
's M
ilest
ones
Mum
's Q
uest
ions
-9-10-11-12 -8 -7 -6 -5 -4 -3 -2 -1 Birth 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
Baby
's M
ilest
ones
Mum's JourneyCreated August 2009
First seperations. It's starting to feel like a family.Fusional relationship between Mum & Baby
ToddlerBabyNewbornIt's all about mumPrenatal
Mon
th b
y m
onth
baby can be naughty
teaching good behaviour
baby starts start potty training
baby starts to have friends
first 'real' holiday as a family
2 year check up
with Pediatri-
cian
Baby goes to
pre-school
toddler dresses on
his own
Can baby eat like us?Is he getting too much sugar?
How to deal with tantrums?
How can I teach him?
When will he play by himself?
When will he make friends?
What games can i find for baby online?
Is he ready for school?
Is he happy?
How to introduce a little brother/sister?
Will he remember his baby food?
What about a second baby?
What games can/ should we play?
How do I know my baby is well/healthy?
What should I do when baby is too excited to sleep?
climbs
dances to music
baby's digestive system reaches maturity
masters some words
start of tricycle riding
uses a fork
learns to rundevelops his balance
first sentences & can start to sing
toilet-trained
develops speech more quickly
still has specific nutritional needs
climbs stairs step by step
develops complete set of teeth
ridesbike
right or left handed?
better hand coordination
baby cries when mum leaves
feeling more "normal"
starting to get out and about
begin weaning
family mealtimes
dealing with "no"!
sharing new developments with friends & family
baby moves to own room
first games with baby
getting pre-pregnancy body back
monthly appointments with doctor (vaccinations, check-ups)
baby starts to sleep through the night
9 months check-up
baby's first
birthday
Is baby ready for weaning?
Ready for pram?what to do about Colic?
Can I find natural or food for baby?
How much?
Is he ready for finger food?
When will she feed herself?
can baby eat birthday cake?home-made or baby food?
When can I give her cow's milk?
How can I baby proof my house?
What to do with a fussy eater?
How do I teach baby good manners?
How can I save money?
Which foods are safe for baby?
When will she really say "mum" and "dad"?
What new foods, when and how?
How can I stimulate baby's development?
How do I protect my baby?
tries to catch his feet
babbles
first teeth
grabs his bib
more mature digestive system
stands on all fours
grabs his bib
begins to chew
better breathing while eating
starts self feeding
understands yes and no
shows likes and dislikes
can swallow mushy food
sees clearlyasserts independence
knows his name
masters chewing
first step
expresses refusal
language initiation
eats with spoon
starts to understand how objects work reinforced immune system
says "No" all the time
confident in walking
turns pages of books
starts to draw
shows when he is happy or scared
enjoys looking at books
waves bye bye
understands gestures and surrounding objects
recognises direction of sound
starts to say 'ma' and 'da'
sits with support
crawls
stands up
plays with feet
sits by himeself
picks up objects
grabs spoon
eats in highchair
passes objects
almost perfect vision
stomachcapacity250ml
laughs and smiles at familiar faces
recognises mum'sabsence
recognises smells and colours
drops things
takes food to mouth
drinks with help
says 'mum' and 'dad' with sense
chases things with his index
drinks from cup with help
better tongue and lip control
tries to eat alone
maintains eye contact
Lifts head 45°
Cries when hungry
grasps finger
recognises his hands
grasps finger
digestive system is immature
recognises voices and sounds
Listens and stays alert
restless before feeding
learns sucking reflex
first smile first laugh
stomach capacity
30 to 120ml
leaves the hospital
first night home
1st week check-up
quality time with baby: evening meals important
back at work (for some)
leaving baby with nanny or family
in a "bubble", at home with baby
birth announced (informal)
birth announced(formal cards)
rebuilding a couple life after birth
transition from breastmilk to bottle
Why is he losing weight?
Which name?Is he getting enough milk?
What can I eat to have the best milk?
Pacifier?
Is he comfortable?
Will he be allergic?
What will baby do next?
Why is baby crying?
Breastfeeding or bottle?
Am I a good mother?Is baby developing
normally?
Why can't baby sleep through?
baby blues
choosing a doctor
general announcement
morning sickness
start of cravings register for day nursery
notice body changes
anxiety about viability of pregnancy
look for maternity clothes
researching information about pregnancy & birth
checks ups with doctor/ gynecologist once a month
pregnancy test
baby's first kick
begins moving
tellingdad
maternityregistration
first ultrasound : expected birth date
Nesting: final preparation for baby's arrival
second ultrasound
birth classes
maternity leave
buying food adapted for pregnancy
Can my baby feel and think?
Do I need to take supplements?What can I eat?
Am I pregnant?Where can I find the right information?
Which hospital?
How do my habits affect my baby?
What should I expect?
Home or hospital birth? Boy or girl?
Are we ready?
Will my baby be healthy?
the embryo becomes a fœtus (90% of
organs have started to
grow)
umbilical cord starts
to grow
100% of organs are
formed
develops touch
sensitivity
sex is confirmed
develops capacity to
smell develops hearing
eye sight develops
brain development
quickens
able to form memories
false contractions adopts a
sleep pattern
baby engages
What can go wrong?
Will I be a good Mum?
I'm a mother!
lundi 23 novembre 2009
Conception de contenus webFormatage
lundi 23 novembre 2009
Formats éditoriaux
Les formats éditoriaux traditionnels sont bien connus :article, liste, interview, citation, extrait, note, fiche, résumé, légende...
La communication digitale a autorisé une démultiplication des formats éditoriaux...
lundi 23 novembre 2009
Formats éditoriaux
lundi 23 novembre 2009
Formats éditoriaux
lundi 23 novembre 2009
Formats éditoriaux
Certains formats ont radicalement changé notre manière de communiquer et de publier l’information :• email• blogs • questions-réponses (Yahoo Answers...) • wiki • social bookmarking• twitter• ...
lundi 23 novembre 2009
Conception de contenus webEnrichissement
lundi 23 novembre 2009
Enrichissement rédactionnel
Comment enrichir un article, un document, une page..?
lundi 23 novembre 2009
Enrichissement rédactionnel
Comment enrichir un article, un document, une page..?
lundi 23 novembre 2009
lundi 23 novembre 2009
Enrichissement rédactionnel
photoaudiochiffresdiagrammesfichiers à téléchargerfiches complémentairesliens contextuelsmodule interactifsservices (email, partage, impression...)...
lundi 23 novembre 2009
StructureUXD
lundi 23 novembre 2009
Au sein d’un système, qu’il soit de nature biologique, mécanique, informatique, économique, social... qu’il soit simple ou complexe, une structure bien conçue apporte intégrité et adaptabilité.
lundi 23 novembre 2009
Dome géodésique de Montréalprinicipe inventé par Buckminster Fuller
lundi 23 novembre 2009
Architecture d’informationPrincipes
lundi 23 novembre 2009
La pratique de l’architecture d’information concerne la création de modèles d’organisation et de navigation qui permettent à l’utilisateur de se déplacer dans les contenus d’un site de manière efficace et efficiente.
Principes
lundi 23 novembre 2009
Pour créer une organisation et une navigation, il est possible d’aborber la question de 2 manières :• approche descendante• approche montante
Principes
lundi 23 novembre 2009
c a t é g o r i e s
• approche descendante
Principes
contenu
lundi 23 novembre 2009
c a t é g o r i e s
• approche montante
Principes
contenu
lundi 23 novembre 2009
c a t é g o r i e s
• combiner les deux approches est souvent nécessaire
Principes
contenu
5. Structures / architecture d’information
lundi 23 novembre 2009
• concevoir une structure capable de s’adapter au changement et de s’accomoder d’une augmentation des contenus
Principes
lundi 23 novembre 2009
• L’unité de base des structures d’information est le nœud.• Nœud ≠ Page
Principes
lundi 23 novembre 2009
• Structure hiérarchique • Relation entre les nœuds : type parent-enfant
Principes
lundi 23 novembre 2009
4. Contenus / architecture d’information
• Structure hiérarchique
Principes
lundi 23 novembre 2009
4. Contenus / architecture d’information
• Structure hiérarchique
Principes
lundi 23 novembre 2009
4. Contenus / architecture d’information
• Structure hiérarchique
Principes
lundi 23 novembre 2009
4. Contenus / architecture d’information
• Structure hiérarchique
Principes
lundi 23 novembre 2009
• Structure matricielleà 3 dimensions
Principes
lundi 23 novembre 2009
• Structure matricielle à 3 dimensions
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Structure matricielle à 3 dimensions
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Structure organique
Principes
lundi 23 novembre 2009
4. Contenus / architecture d’information
Principes
• Structure organique : internet
lundi 23 novembre 2009
• Structure organique : wikipedia
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Structure séquentielle
Principes
lundi 23 novembre 2009
• Structure séquentielle
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Vocabulaire et nomenclature‣ vocabulaire controlé‣ metadata (information sur l’information)
Principes
lundi 23 novembre 2009
• Vocabulaire et nomenclature
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Vocabulaire et nomenclature
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Vocabulaire et nomenclature
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Vocabulaire et nomenclature
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
• Vocabulaire et nomenclature
4. Contenus / architecture d’information
Principes
lundi 23 novembre 2009
Architecture d’informationWireframes
lundi 23 novembre 2009
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxx
•xxxxxxxx•xxx•xxxxxxxx•xxxxxx•xxxxxxxx•xxxxxxx
lipsumlipsum
lipsum
lipsum Lorem“Sed ut perspiciatis unde omnis iste
natus error sit voluptatem “
iatis unde omnis iste
natus error sit
voluptatem iatis unde
omnis iste natus error sit
voluptatem
iatis unde omnis iste
natus error sit
voluptatem
Lorem“Sed ut perspiciatis unde omnis iste
natus error sit voluptatem “iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
Lorem“Sed ut perspiciatis unde omnis iste natus error sit voluptatem “
iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
iatis unde omnis iste natus error sit voluptatem
ACCUEIL
PEAU YEUX
FICHES CONSEIL
GAMMEGAMME
GAMME
FICHE PRODUITFICHE PRODUIT
3.1
3.2
3.1.1
FICHES CONSEIL
GAMMEGAMME
GAMME
FICHE PRODUITFICHE PRODUIT
4.1
4.2
4.1.1
3.0 4.0
RECHERCHE
PLAN DU SITE
CONTACT
MENTIONS LEGALES
CREDITS
MA SELECTION
AUTRES SITES
FICHE PRODUITFICHE PRODUIT
KLORANE
DECOUVRIR
PLANTES REGION
5.0
5.2 NOS ENGAGEMENTS
5.1 ACTUALITES
5.3 LA RECHERCHE
5.4 LA PHYTOFILIERE
5.5
FICHE PLANTE
QUESTIONS/
REPONSESQUESTIONS/
REPONSES
FICHE PLANTE
?
Problématique
lundi 23 novembre 2009
Zoning
Un gabarit (ou squelette ou layout) est la structure visuelle persistante qui définit la charpente d’une interface.La variations d’un gabarit définissent en partie les états d’une interface.Les gabarits constituent le fondement des wireframes.La méthode de construction d’un gabarit s’appelle le zoning.
lundi 23 novembre 2009
Wireframes
Les wireframes sont des représentations visuelles qui capturent à elles seules l’ensemble des décisions stratégiques, fonctionnelles, d’architecture d’information et d’ergonomie.
Ils servent de référence pour le design graphique et pour le développement du projet digital. Ils contiennent différents niveaux de précision selon le contexte.
lundi 23 novembre 2009
lundi 23 novembre 2009
Zoning
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
HEADER
COL 1 COL 2 COL 3
NAV
lundi 23 novembre 2009
Zoning
Créer votre agenda santé
Au coeur de l’actualité
Le stress est-il communicatif ?
Benoit Monté psychologue
répond à toutes nos questions...
Chute de cheveux
Comment feiner la chute de ou favoriser
la reposusse
Lutter contre les rhumes à répétition
Le témoignage d’une internaute à
découvrir
PodcastA l’occasion de la semaine du sommeil, le Pr Marc Leroy dresse un bilan de l’éfficacité clinique de la phythothérapie
Santé
Beauté / Bien-être
Témoignages
Digestion difficileCirculationFatigueStressSommeilMaux de têteEtat grippalDouleurs articulaires FeminitéEquilibreVitalitéMaux de l’hiverConfort respiratoireNutrition
Voir tous les sujets
MinceurChute des cheveuxBeauté des cheveuxDermo-nutritionBronzage
Voir tous les sujets
StressSommeilRhumeMinceurMénopause
Voir tous les sujets
Produits
AromathérapiePhytaroma
Améliorer son confort respiratoire
Phytothérapie Elusanes
Résoudre les troubles passagers
du sommeil
Dermo-nutritionDoriance Anti-âge
Lutter contre le photo-vieillissement
En quelques clics, complétez votre profil santé et profitez de conseils personnalisés pour garder la forme !
Partout avec vous, même sur votre mobile
1
2
3
Vos astuces forme
Les conseils d’un phytothérapeute
Vos conseils santé naturelle tout au long de l’année
Créer mon agenda
Connaissance & plantes
Le test du moisDécouvrez votre profil minceur
Menez vous une vie stressante ?
oui pas spécialement pas du tout
Consultez plus de 150 articles de référence sur la phytothérapie
Posez des questions santé, forme et bien-être, des experts répondent à vos questions
?
Votre pharmacie
Naturactive
code poste OK
Trouvez les produits Naturactive, les plus proces de chez vous
rechercher Professionnels Accueil Le magazine Votre santé Nos produits Naturactive
MARQUE
INFORMATIONS DʼACTUALITÉ
PÉDAGOGIQUE
ACCOMPAGNEMENT
INFORMATIONS DE FOND
PARTICIPATIF
CRM
ACCOMPAGNEMENT
THEMES
MARQUE
PÉDAGOGIQUE
PARTICIPATIF
lundi 23 novembre 2009
Zoning
lundi 23 novembre 2009
Zoning
lundi 23 novembre 2009
Exemples
lundi 23 novembre 2009
Exemples
lundi 23 novembre 2009
Exemples
lundi 23 novembre 2009
Exemples
lundi 23 novembre 2009
Exemples
lundi 23 novembre 2009
Architecture d’informationDesign d’information
lundi 23 novembre 2009
“In order to do a better job of developing, communicating, and pursuing a strategy, you need to learn to think like a designer” Tim Brown, ceo IDEO, Strategy by Design, June 2005
lundi 23 novembre 2009
Tactique
Stratégique
ConceptionDocumentation
Design fonctionnel
Structuration de
l’information
Spécificationlogique
Conceptionstratégique
Etudesstratégiques
Analyses statistiques
lundi 23 novembre 2009
TactiqueTactique
Stratégique
ConceptionDocumentation
Design fonctionnel
Structuration de
l’information
Spécificationlogique
ConceptionStratégique
Etudesstratégiques
Analyses statistiques
lundi 23 novembre 2009
lundi 23 novembre 2009
lundi 23 novembre 2009
lundi 23 novembre 2009
lundi 23 novembre 2009
lundi 23 novembre 2009
Corolle Kinra Girls
Intimate
Extimate
My accountMy profileMy avatar
My bedroomThe schoolAdventure places
MembersFriends
Edutainment modulesMediaGames
2
3
4
1
Who I am
Where I go
Who I meet
What I do
mardi 21 juillet 2009lundi 23 novembre 2009
Interaction
Inve
stig
atio
nB
uild
Com
munities
Navigation
Custo
m N
avigaion
Explo
ratio
n
Characters Adventu
res
Generate C
ontent
Educa
tive
Le
arni
ng
Casual
Pla
y
Explore a
Campus place
Explore a
Theme place
Explore a
Objects
?
Bookmarked
Place
Popular Places
View an
edutainment module
ABCABC
View a Kinra Media
View a Educative Media
create
my Avatar
create my
Bedroom
customize
my Bedroom
complete my
Preferences
customize
my Avatar
Navigation map
Navigation Lists
and menus
Shortcuts
Last visited
See a member’s
Profile
Visit my
neighbors’ profile
See who’s online
Chat
Join a Group / Club
Invite "real" Friends
Add a Member
as Friend
Send Message
to Friend
Send a Gift to FriendWrite a note on
a member’s Board
Participate in an enigma
Make an artistic creation
Update my miniblog
Share pictures
Participate in a Quizz
Play a
single-player game
Play a
multi-player game
Read / Listen to
a Kinra Story
create my
Account
create my
Profile
lundi 23 novembre 2009
lundi 23 novembre 2009
2D
pré-achat
achat
post-achat
Avatar
Magazine
en ligne
Contenus et offres
personnalisées
consulte
Profilcrée
reçoit
coach
Evénements
virtuels
regarde,participe
Gifted Friends
Espaces
virtuelles non-
marchands
crée
visite
Wishlist
3D
Garde
robe
Plateforme Gifted
User concept model
Service cadeaux
consulte l!avatar de ses amis
Feedbacks
Livraisons
suit recoit
Conseiller personnel
browse, achète, personnalise des produits
envoie des cadeaux
conduit à
Ambassadeurs+ Groupes
conseillent des nouveautés
Boutiques en ligne
2D
3D
conseille
Gifted User
consultent,essaient
partagent
organise
crée
ajout de produits
Produit
Commande
peut renvoyer
donneInterface
customisée
créepersonnalise
personnalise
lundi 21 septembre 2009
lundi 23 novembre 2009
CISCO BFM TV / WIKITV
Education
Economie
Santé Sport
Environ.t
etc.
CERCLES
de discussions
Thème
Thème
Thème
ThèmeThème
ThèmeThème
ThèmeThème
Thème
Thème
Thème
ThèmeThème Thème Thème
Thème
Cercle de discussion (détail)
Présentationthéme
Forum/ blog de discussion
(sujet)
Projets
Présentationprojet
Commentaires
sélection de discussions sélection de projetsMODERATION
THEMATIQUES PROJETS
COMMUNAUTEProfil simple Créer un projet
Wiki projet
ACCUEILCISCO BFM WIKITV
Annonce emission LIVE
Archives emissions
Présentation cercles de discussions
Projets Discussions récentes
LIVE
sélection de membres
Messagerie interne
Inscription
Simple
Créateur Validation
Thème
BLOG REDACTIONBlog rédaction Commentaires
ARCHIVES EMISSIONSPrésentation
emission
RemontéeCommentaires
CISCO BFM WIKITV
LIVEFLUX LIVE
Commentaires
Liste participants
Remontée Projets
Commentairesretenus par la
rédaction
Sujets
Sujets
Sujets Sujets
Sujets
Sujets
Sujets
Sujets
Sujets
Sujets
Sujets
SujetsSujets
Sujets
Sujets
Sujets
Sujets
Sujets
Remontée Sujets
Profils participants
Archives des emissions
Phase 2
Phase 2
lundi 23 novembre 2009
lundi 23 novembre 2009
Choose Guys / Girls } } } }
RedTab Engineered Blue Vintage
Details
preview
Browse collections
M / W
Display product Product
picture
Discover the perfect match
Improve your look
Discover the perfect match Improve your look
Find your size (cf truejeans.com, zafu.com)
Product
picture
Tops
Bottoms
Shoes
Accessories
Expert
review
Other
reviews
1. measure
2. body shape
Add to wishlist
Pushed content
Improve your look
Add to wishlist
Pushed content
Discover the perfect match
Event selection
Pushed content
Discover the perfect match
Add to wishlist
Pushed content
Event selection
Browse by
events
Tops
Bottoms
Shoes
Accessories
Improve your look
Add to wishlist
Pushed content
Colours
Patterns
Details
Zoom
Find your size
Find your size Find your size
Event selection
Discover the perfect match
Improve your look
Add to wishlist
Menu
Event selection
Registration form
Find your size (results)
3. results
Discover the perfect match
Add to wishlist
Pushed content
Wishlist
Product list
Registration form
Discover the perfect match
Event selection
Pushed content
Want to feel different ?
Browse by
mood
Tops
Bottoms
Shoes
Accessories
Improve your look
Add to wishlist
Pushed content
Find your size
Want to feel different ?
Want to feel different ?
Post your look / reviews / comment
Users
reviews
Other
reviews
Registration form
Receive info (newsletter / RSS...)
Product
reviews
Other
reviews
FIT
GU
IDE
CA
TA
LO
GC
OM
MU
NIT
YP
ER
SO
NN
AL
lundi 23 novembre 2009
lundi 23 novembre 2009
Liste des emissions
Accueil
Cercles de discussions Emissions
Landing page
Sommaire Sujet (forum) ConnexionEmissionsLive
Blog
Sommaire
Poster un
commentaire
Poster un
commentaire
Poster un
commentaire
Voter
Projets
Sommaire
Poster un
sujet
Mon compte
Mon Profil Mes préférences
Editer mon
profil public
Editer mes
informations
Connexion &
Inscription
Validation
Phase 2
Proposer un
sujet
Thématique
Flux des discussions tous sujets
Projets en relation
Projets récents
Billet Blog ds théme
Flux des discussions tous thèmes
Membres les + actifs
Flux video Live
Discussionlive
Poster un
commentaire
Baromêtre
Liste des sujets
Supprimer
mon compte
Flux des résumés
Profile Versac
Flux des discussions tous thèmes
Profile Versac
Membres les + actifs
Flux des comentaires
Contacts
Billet
PrésentationProjet
Présentation projet (extrait)
Profile créateur
Fichiers joints
Liste des projets
Projets les plus
commentés
Inscription
CISCO : HUMAN NETWORK
Push prochaine emission
Projets les plus récents
Video de présentation
Proposer un projet
Espace Administration
Projet
Forum Projet
Vidéo dernière emiision
Poster un
commentaire
Liste des catégories
Catégorie Projets
Liste des projets
Projets les plus
commentés
Projets les plus récents
Liste des catégories
Article présentation
(suite)
Upload
video
Texte de
présentation
Upload
Photos
Upload
documents
Gestion du
forum
Validation ouverture
espace projet
Galerie photos
lundi 23 novembre 2009
lundi 23 novembre 2009
lundi 23 novembre 2009
3. Stratégie / notions de design d’information
1.1 Sommaire 1.2 Thème 1.3 Carnet 1.4 Billet a.1 Identification 1.4 Billet + form. commentaire
a.2 inscription
0.0 Accueil non loggé
PARCOURIR LES CARNETS REDIGER UN COMMENTAIRE
CREER UN CARNET
a.1 Identification
a.2 inscription
c.4.1 Reglages Carnet
c.4.3 Rediger un billet
REDIGER UN BILLET
PARCOURIR LES Q-R
2.1 Sommaire 2.2 Thème
REPONDRE A UNE QUESTION
a.1 Identification
a.2 inscription
2.3 Répondre à une question
POSER UNE QUESTION
a.1 Identification
a.2 inscription
2.4 Poser une question
PARCOURIR LA COMMUNAUTE
3.1 Communauté 3.1.2 Tous les groupes
3.1.3 Thème
REJOINDRE UN GROUPE
3.1.4 Groupe (fiche)
3.2 Tous les membres
3.2.2 Fiche membre
a.1 Identification
a.2 inscription
g.0. Inscription groupe
g.1 Groupe (accueil)
a.3 Confirmationemail
AJOUTER PARENTS PRÉFÉRÉS
a.1 Identification
a.2 inscription
RECHERCHER
CONTACTER MEMBRE
a.1 Identification
a.2 inscription
3.2.2 Fiche membre + pop-in message
3.2.2 Fiche membre + pop-in alerte
AJOUTER AMIS
a.1 Identification
a.2 inscription
3.2.2 Fiche membre + pop-in message
EXPLORER UN GROUPE
g.2 Discussiong.2 Discussions groupe
PARTICIPER A UNE DISCUSSION
g.3 Publier un commentaire
PUBLIER UNE DISCUSSION
g.4 Créer une discussion
0.2 Créer votre carnet
0.1 Rediger un commentaire
0.3 Poser une question
R.0 Recherche R.2.1 Résultats editorial
R.0.1.1 Carnets
R.0.1.2 Q-R
R.1 Explorer (tags)
m.1 bloc Confirmation
R.0.1Editorial
R.0.2 Communauté
R.0.2.1 Membres
R.0.1.2 Groupes
RESULTATS DE RECHERCHE
R.2.2 Résultats Communauté
f.2 Envoyer à un ami
FONCTIONS ASSOCIÉES
m.1. bloc Confirmation
f.2.1 Pop-in Formulaire
f.2 Envoyer à un ami
FONCTIONS ASSOCIÉES
m.1. bloc Confirmation
f.2.1 Pop-in Formulaire
m.1. bloc Confirmation
REPONSES
f.3 Alerter l’administrateur
m.1. bloc Confirmation
f.3.1 Pop-in Formulaire
2.3 Question 2.3.2 Réponse
Communauté
Questions-réponses
Carnets de parents
RechercheACCUEIL
V2
lundi 23 novembre 2009
UXD
Interaction
lundi 23 novembre 2009
Définition
Le design d’interaction appliqué au secteur logiciel et web est la discipline qui traite du comportement de l’interface avec laquelle interagit un utilisateur.
La discipline s’intéresse au comportement des gabarits et des composants d’interface.
lundi 23 novembre 2009
Design d’interactionPrototype
lundi 23 novembre 2009
Interactif
Basse résolution Haute résolution
Statique
Degré de précision
lundi 23 novembre 2009
Interactif
Statique
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Interactif
SketchingStatique
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
lundi 23 novembre 2009
Interactif
StatiqueSketching
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
InteractifPrototype papier
StatiqueSketching
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Degré de précision
Interactif
Low résolution Hi résolution
Prototype papier
SketchingStatique
lundi 23 novembre 2009
Interactif
SketchingStatique
Prototype papier
Sketching
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Interactif
SketchingStatique
Prototype papier
Sketching Ecrans(psd, jpg...)
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Ecrans(psd, jpg...)
lundi 23 novembre 2009
Interactif
SketchingStatique
Prototype papier
Sketching Ecrans
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Interactif
SketchingStatique
Prototype papier
Sketching Ecrans
Prototype digital (HTML, Flash)
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Degré de précision
Interactif
Low résolution Hi résolution
SketchingStatique
Prototype papier
Sketching Mockup
Prototype digital (HTML, Flash)
lundi 23 novembre 2009
Interactif
SketchingStatique
Prototype papier
Sketching Ecrans
Prototype digital
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Interactif
Statique
Prototype digital
Prototype papier
Sketching Ecrans
Wireframes
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Interactif
Statique
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
11MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
Degré de précision
Basse résolution Haute résolution
lundi 23 novembre 2009
Basse résolution Haute résolution
Degré de précision
Interactif
Statique
Prototype digital
Prototype papier
Sketching Ecrans
Wireframes
NIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Your highlights Slideshow
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
11MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
lundi 23 novembre 2009
Interactif
Statique
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
11MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
Basse résolution Haute résolution
Degré de précision
lundi 23 novembre 2009
Interactif
Statique
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
11MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
Basse résolution Haute résolution
Degré de précision
lundi 23 novembre 2009
Degré de précision
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Mockup
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
11MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
lundi 23 novembre 2009
Interactif
Statique
Low résolution Hi résolution
Prototype digital
Prototype papier
Sketching Ecrans
WireframesNIDO Home Moments Health Matters Our Range
Hi Lynn | My account | Log Out | Help
NIDO Website - 1.1.1 Diary
My Activities | Capture a moment | Diary | Highlights | My friends | Health Tracker
Contact Us Privacy Terms & privacy Copyrights Send to a friend
John’s Family Diary
Oscar Angelica
Family & Friends
Your highlights Slideshow
You have new comments !
> View all
You have: 6 family members, 14 friends
3
Erin has accepted your invitation
Health MattersSpotting & Treating Food Allergies
> How to know if your child is at risk
!
you have new comments!3
Your Friends (14)
Edit my pro!le
Recently added
View all
Mary, Ellen, Peter
Comments
Show me All entries Only highlightsStarting from !rst day | today
12MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
11MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
10MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta...
Everyday | 2 comments
08MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments new
06MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
TELL MY FRIENDS NOW !
Edit friends list
05MAY
Lorem ipsum et diliagt gentris sed etiam unique valor, melior paritus. Et uni soesu terrae submitta... Si meliora est vede meccum !
Everyday | 2 comments
Degré de précision
lundi 23 novembre 2009
Design d’interactionDesigner les comportements d’objets
lundi 23 novembre 2009
Formalisation
• Codes visuels montrant le potentiel d’interaction
lundi 23 novembre 2009
Drag and Drop
lundi 23 novembre 2009
‣ Codes visuels montrant le potentiel d’interaction
Formalisation
Déplacements au click et motion design
lundi 23 novembre 2009
Formalisation
• Scénario d’interaction statique
lundi 23 novembre 2009
lundi 23 novembre 2009
Formalisation
• Charte d’interaction (statique ou interactive)
lundi 23 novembre 2009
Formalisation
version : 24/11/08 auteur : David Raichman
1.0 Interface générale
5
3
1
Remarque générale sur le motion design : on prend ici comme principe que tout changement d’état de l’interface se fera par un interpolation sur les propriétés concernées (Tween avec easing Out).
2
1 Terre
•rollOver : •press :
Comportement local - cas hors France
Sur toute la terre, en dehors des région, le curseur passe en état spécial main
Le curseur main diminue de taille de 10%. Si une fenêtre est ouverte (élément 5, ci-contre) lorsqu’on déplace la terre, celle ci-se referme aussitôt par un mouvement inverse avec lequel elle s’est ouverte.
La rotation de la terre se fait uniquement selon l’axe de ci-dessus.
lundi 23 novembre 2009
Formalisation
• Wireframe animé
lundi 23 novembre 2009
Formalisation
7. Interaction / design d’interaction
lundi 23 novembre 2009
Recommended