11. Different Contexts
content
Context is the joint of a corporate
strategy and a market
context
users
IA
Research
Trade
Education
Lobbying
Collaboration
Consultation
Innovation
Also:
Social
Cultural
12. Users Have Needs
content
IA is User-Centered Design aka
Usability aka User Experience
context
users
IA
Learn
Discuss
Interact
Create
Discover
Exchange
Influence
Buy/Sell
Share
13. Content To...
content
Content is the vector of your
objectives
context
users
IA
Communicate
Inform
Teach
Reference
Collect
Promote
Advertise
Sell
Share
Persuade
PURPOSE!
25. User Research
Understand your users
Watch them
Talk to them
Who are they?
What do they need?
How will they find what they need?
What do they want?
What do they know?
What do they like?
How do they use technology?
How might they use your product?
What resources do they have?
What kind of tasks they are expecting to perform?
How to serve the users?
30. Model
Use knowledge of users
Involve them in the process
Balance user needs and business
objectives
Define the model:
Type of content
Language
Format
Structure
Taxonomy
Etc
33. Format for Humans
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec
porta. Etiam at justo in nunc
semper lacinia. Cras interdum
adipiscing elit. Sed dapibus
ultricies erat. In at enim.
Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices
posuere cubilia Curae; Quisque
dictum interdum lorem. Fusce
volutpat. Maecenas et nulla.
54. Semantic Web
"wall" ?
a brick wall?
the Berlin Wall?
the Great Wall of China?
a song by the Pink
Floyd?
a virtual pinboard on
Facebook?
55. Semantic Web
Set of standards and tools
by W3C to:
add meaning to content
make information
understandable by
computers
Microformats is another
tentative towards semantic
web.
56. Data Portability
Move or copy data in order to reuse it outside
its original container.
DataPortability Project
Supported by Google, Facebook, Plaxo,
Drupal, Netvibes, LinkedIn, Flickr, Six Apart,
Twitter, Digg, Microsoft
Multiple open standards: APML, FOAF,
hCard, OAuth, OpenID, OPML, RDF, RSS,
XFN, etc
Question: copying/pasting vs linking vs embedding
57. Licensing
Copyright
Copyleft
the freedom to use and study the work,
the freedom to copy and share the work with others,
the freedom to modify the work,
and the freedom to distribute modified and therefore
derivative works.
the author of a derived work can only distribute such works
under the same or equivalent license.
59. Licensing
Copyleft and Creative Commons licenses
ensure open access and dissemination of
scientific, cultural, artistic content regardless
of the social classes.
69. Model
Taxonomy:
Is it necessary for your needs?
Taxonomy vs folksonomy?
Existing rules?
Categories?
Evolution of taxonomy? Add? Remove?
70. Model
Semantics & Portability:
Is it necessary for your needs?
Does your information require to be recognised
by computers?
Does or should your information be processed
by third parties? Internal tools?
Should your information be indexed by semantic
search engines?
Should your information be transferred to other
systems or services?
72. Model
Navigation:
What are / should be the different paths to
access information?
Search?
Site map?
Cross-linking?
Contexts?
Related content?
73. Model
Pagination:
What type of content is likely to require
pagination?
What criteria should be used to sort results?
Should results be highlighted?
78. Layout design is about preparing
the information on a website in the
best possible way, so that users
can efficiently and effectively find
and digest information
80. Presentation
Techniques making the information on a page much
easier to digest:
how menus and sub-menus are laid out
how different sections are cross linked
how to build a website easy, effective and intuitive
how to design a page to facilitate the way of
consuming information
(most users skim, scan and jump)
...
81. Presentation
Don't wrap key information in bundles of text
Highlight it
Don't give users paragraphs on end
Break them up with headings, subheadings, bullet
points, diagrams
Lead the users in with titles, subheadings,
demarcations, pullquotes, and other techniques for
pulling the eye.
Give them a summary of the four step process on the
homepage, then at each stop there are pointers to
direct the user onto the next step
84. Organization
Develop a sitemap and plan of how the information will
site in a hierarchical way.
Define how different sections might tie in together
Specifiy paths a user might take through a sitemap
Organising information doesn't even necessarily have to
be about putting it into menus and submenus:
you may find that some information shouldn't be on a
site
or that it requires a subsite
or that you need to do something else altogether.
85. Organization
How deep or how wide should your
navigation be ?
Depth: number of layers of categories and subcategories
Width: number of items of each level
Find the right balance
86. Organization
Too many items on a single level (especially the top level)
=> confusing the user
If a user has to click many levels in => you risk losing
them
Good Rule
Keep the number of options on a given level
to 4 - 8.
8 top level items x 8 subcategories x 8 sub-subcategories
= 512 pages
90. Structure
Short, clear and explicit titles
Paragraphs concise and focused on 1 idea
Short sentences (15-20 words)
Simple texts (80% short words, max. 4 syllables)
Rule of the inverted pyramid (from the most important to the
detail)
Avoid promotional tone
Highlight your content (font sizes, bold, colors for links, lists,
icons...)
91. Structure
Distinguish between information content (consuming mode) and
orientation content (guidelines, introduction, search, help mode)
Avoid columning articles
Correct use of links:
max. 5 links in an article
other links grouped aside the article "Learn more..."
Add images and videos to illustrate the content
94. Conventions
When you click on a button that says "Home" you expect to
go to the start page, you do not expect to go to a page that
shows a person's house.
Logo on the top left side
Languages on the top right side
95. Conventions
Use icons to label some task or action
Keep the same typography (font, size...) between the
same kind of content
99. Templates
Pre-developed page layouts used:
to create new pages from the same design, pattern, or
style
to separate content from presentation
to separate business logic from presentation logic
for mass-production of web pages
to deploy applications that are flexible and easily
maintainable
101. Templates
Header
Logo + Baseline
Languages
1st level tranversal menu
Breadcrumbs
Center
Main content
Images + Videos
Footer
Legal Terms
Copyright
Sitemap
FAQ
Contact
Left Column
2nd level menu
Categories / Tags
Right Column
Search engine
Newsletter
RSS
Addtional information
106. Eyetracking
Users spent a
longer amount of
time viewing the
original version
of the content
(left) but
remembered 34
percent less than
those who
received the
reformatted story
(right)
107. Eyetracking
The image of the train did not get eye fixations.
Users did find the "top stories" and spent the most time there,
but only after traveling the page and making fixations in other
areas.
108. Eyetracking
The longest eye fixations
are on the area labeled
"News Releases," where
the main stories are and
where the site designers
intended to direct them.
Users seemed to find
exactly what they needed
and stay there when
information was more
clearly labeled.
Again, the image gets no
fixations.
110. Components
Interface = where a person and a website touch
Usually built with visual components:
menus
buttons
drop-down lists
forms
and all the other ways you can interact with a website
(hyperlinks)
112. RIA
RIA = Rich Internet Application
Web applications that have the features and functionality of
traditional desktop applications
=>
Web page does not need to be reloaded. A simple area of
the web page is refreshed
113. RIA
Rich components:
Drag and drop
Sliders
Technologies:
Ajax
Flash
Silverlight
Drawbacks
Search engines may not be able to index the text content
of the application
Accessibility issues with screen readers
115. RIA
Useful when the web page provides a specific tool:
Image & video editing
Slideshows (Google Docs)
Music manager
Maybe not so useful for pure content web pages:
News and articles
Documents
117. Navigation
Navigation system should remain consistent
Let the user figure out where he can go
Example - A menu bar should not:
move somewhere else
change dramatically
just disappear
121. URL
Use friendly, clean and explicit URL's
Prefer
http://www.mysite.com/section/my-article-title
Instead of
http://www.mysite.com?sid=203&pid=1243
Friendly URL's will inform users and search engines about
the content of your page
Permalinks to send and bookmark easily a page
145. View
Layout: Organization
Try to design the sitemap based on the model
(only high level)
Define the menus based on the sitemap
Define the depth and width of each one of the
menus
146. View
Layout: Structure
Go to ... and redesign the structure of the page
Think about the different items (pdf, video, html, links,
headlines, sections, paragraphs, lists, etc)
Is it necessary to have everything on one single page?
What existing content could be reused?
How can the content of this page be reused
elsewhere?
148. View
Layout: Templates
Image a generic template that could apply to the
majority or a significant number of pages.
Consider columns, headers, menus, categories, etc.
153. Validation
Involve users
Get feedback
Start early in the process
Prototyping
Functional and usability testing
Schedule testing activities
Apply realistic scenarios
Favor interactions
Iterate / revise design (Agile) ->
easier than waiting until the end!
154. Functional Testing
Useful to check the behavior of the information system
Controllers are involved in the functional behavior of the
information system
Create test cases:
Specify the steps of the test
Define the input data
Check the output data
155. Functional Testing
Log in valid account:
Steps: go to the homepage and click the login link to
access the login form
Input data: username + password
Output data: message 'you are logged in' + personal
account information
Log in with wrong password:
Steps: go to the homepage and click the login link to
access the login form
Input data: username + wrong password
Output data: login form + message 'wrong password,
try again' + link 'I forgot my password, send me a
new one'
156. Usability Testing
You can learn a lot by watching people
You should analyze:
how people use the website
how they digest the information
how they behave
where you can improve your design
Heuristic Evaluation by Jakob Neilsen
5 people should find around 75% of all usability
problems
10 people will only get you up to 85%
161. ECM
Entreprise Content Management
Software used to capture, manage, store, preserve, and
deliver content and documents related to organizational
processes
CMS for Entreprise
EDM (Electronic Document Management)
Repository
162. ECM
Optical Character Recognition (OCR)
Document Sharing
Versioning, Backup, Archiving, Recovery, Lifecycle
Advanced Search
Connectors to 3rd party apps
Workflow & BPM (Business Process Management)
converting the document to another format
moving it to another folder
notifying a set of users via email
reviewing steps
173. Tools
Roles:
Try to define the internal and external roles/profiles
Order them by importance
May any persons/employees have different profiles?
174. Tools
Communities
What are your existing communities? Internal and
external ?
How could you benefit from social networks to
increase your audience and make your website
successful ?
176. Maintenance
Your website becomes obsolete the day
you launch it
Mid-term and long-term strategy and objectives
Content generation
Evolving a website
Communication with your community/ies
Learn from your users and react...
Online Marketing
Monitoring and strategic watch
Traffic Analysis
Software upgrade + Bug fixing
