Information Architecture
3-4 February 2009
Our Vision
Our Mission
Bring innovative new ways of
working to the enterprise by
promoting online
collaboration through modern
web-ba...
Our Values
Consulting Services
Business Watch
Knowledge Management
Social Intelligence
Online Strategy
Software, Open Source, SaaS
Other Services
Watch
Community Management
Online Presence
Content Creation
Marketing 2.0
Training
Support
What is this
strange
bear?
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Technique & Profession
content
IA balances the characteristics and
needs of users, content and context
context
users
IA
Different Contexts
content
Context is the joint of a corporate
strategy and a market
context
users
IA
Research
Trade
Educa...
Users Have Needs
content
IA is User-Centered Design aka
Usability aka User Experience
context
users
IA
Learn
Discuss
Inter...
Content To...
content
Content is the vector of your
objectives
context
users
IA
Communicate
Inform
Teach
Reference
Collect...
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Content
Data Information
Meaning
Information is data that has been
processed for use
Content (bis)
Data Information Knowledge
Meaning Understanding
Knowledge is information that is
understood and integrated
Users
Continuing to use
Using
Discovering
IA
Validate
Design
Research
IA
Validate
Design
Research
Understand the audience and context
Use research to solve the problem
Test the design against ...
Project
Launch
Build
Visual Design
Requirements
Strategy & Scoping
IA in a Project
Launch
Build
Visual Design
Requirements
Design
Validate
Strategy & Scoping
Research
Measure
Objectives
Outcome
Output
Measured IA in a
Project
Launch
Build
Visual Design
Requiremnts
Design
Validation
Research
Outcome
Output
Objectives
Strat...
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
User Research
Understand your users
Watch them
Talk to them
Who are they?
What do they need?
How will they find what they ...
User Research Techniques
Interviews
Practice reviews
Surveys
Focus groups
Market analysis
Web analytics
Sales data analysi...
Research
Users come first !
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Model-View-Controller
Model
Use knowledge of users
Involve them in the process
Balance user needs and business
objectives
Define the model:
Type...
Type of Content
News
Docs
Resources
Profile
s
Events
Language
Plain vs ...
Legalese
Technical
Esoteric
Promotional
Summarized vs ...
Detailed
Verbous
Lengthy
Format for Humans
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec
porta. Etiam at justo in nunc
semper laci...
Format for Computers
<XML>
Classification
by date:
Classification
alphabetical:
Classification
by geo:
Classification
by task:
Classification
by audience,
readership:
Classification
with tags:
Classification
by topic:
Structure: Hierarchy
Credits: Donna Spencer
Source: http://www.slideshare.net/donnam/information-
architecture-a-how-to
Structure: Database
Credits: Donna Spencer
Source: http://www.slideshare.net/donnam/information-
architecture-a-how-to
Structure: Heuristic
Credits: Donna Spencer
Source: http://www.slideshare.net/donnam/information-
architecture-a-how-to
Structure: Organic
Credits: Donna Spencer
Source: http://www.slideshare.net/donnam/information-
architecture-a-how-to
Structure: Conceptual
Credits: Donna Spencer
Source: http://www.slideshare.net/donnam/information-
architecture-a-how-to
Internationalisation
Languages:
English
French
Spanish
German
Chinese
Etc
Cultures:
European
American
Asian
Latin
World-wi...
Language
Can be based upon...
User Preferences
Physical Address
IP Address
Web Browser Settings
Operating System
Culture
Influences...
Content
Wording
Tone
Presentation
References
Priorities
Localisation
Determines...
Currencies
Date formats
Content
Number formats
Time shifts
Text in images
Taxonomy
= Predefined Tagging =
many-to-many categorisation
Many-to-many
Folksonomy
= User Defined Tagging
--> Collaborative Tagging
Semantic Web
"wall" ?
a brick wall?
the Berlin Wall?
the Great Wall of China?
a song by the Pink
Floyd?
a virtual pinboard...
Semantic Web
Set of standards and tools
by W3C to:
add meaning to content
make information
understandable by
computers
Mic...
Data Portability
Move or copy data in order to reuse it outside
its original container.
DataPortability Project
Supported ...
Licensing
Copyright
Copyleft
the freedom to use and study the work,
the freedom to copy and share the work with others,
th...
Licensing
Creative
Commons
(better for
multimedia
works)
Licensing
Copyleft and Creative Commons licenses
ensure open access and dissemination of
scientific, cultural, artistic co...
Navigation
Structure
Search
Site map
Documentation
Cross-linking
Cross-referencing
Contexts
Related content
Advice:
Design...
Pagination
Number of search results per page
Length
Criteria: alpha, relevance, popularity, date, etc
Content
Highlight
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Model
Activities
Meetings
Publications
News
Projects
External Links
Information (what information?)
Type of content:
Model
Plain English
Technical?
Legal?
Conversational?
Summaries vs detailed?
Language:
Model
PDF
PDF to HTML?
Videos?
Audios?
Images?
Slideshows?
RSS?
Format:
Model
Classification:
By date -> calendar (meetings)
By topic (activities, ...)
By language (projects)
By geo (meetings)
B...
Model
Structure:
What is the best model?
One or several models?
Try to make a sketch
Model
Internationalisation:
Language:
Language of content
Language of website
Culture:
World-wide
Eastern vs Western
Devel...
Model
Taxonomy:
Is it necessary for your needs?
Taxonomy vs folksonomy?
Existing rules?
Categories?
Evolution of taxonomy?...
Model
Semantics & Portability:
Is it necessary for your needs?
Does your information require to be recognised
by computers...
Model
Licensing:
Copyright?
Copyleft?
Creative Commons?
Use? Copy? Modify? Distribute?
Attribution? Derivative work?
Comme...
Model
Navigation:
What are / should be the different paths to
access information?
Search?
Site map?
Cross-linking?
Context...
Model
Pagination:
What type of content is likely to require
pagination?
What criteria should be used to sort results?
Shou...
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Model-View-Controller
Design
View - Design
Layout
Interface
Aesthetic
Layout design is about preparing
the information on a website in the
best possible way, so that users
can efficiently and ...
Layout
Presentation
Organization
Structure
Conventions
Standards
Templates
Presentation
Techniques making the information on a page much
easier to digest:
how menus and sub-menus are laid out
how d...
Presentation
Don't wrap key information in bundles of text
Highlight it
Don't give users paragraphs on end
Break them up w...
Presentation
Layout
Presentation
Organization
Structure
Conventions
Standards
Templates
Organization
Develop a sitemap and plan of how the information will
site in a hierarchical way.
Define how different secti...
Organization
How deep or how wide should your
navigation be ?
Depth: number of layers of categories and subcategories
Widt...
Organization
Too many items on a single level (especially the top level)
=> confusing the user
If a user has to click many...
Organization
Standard sitemap
Organization
Sitemap using MindMapping
Layout
Presentation
Organization
Structure
Conventions
Standards
Templates
Structure
Short, clear and explicit titles
Paragraphs concise and focused on 1 idea
Short sentences (15-20 words)
Simple t...
Structure
Distinguish between information content (consuming mode) and
orientation content (guidelines, introduction, sear...
Structure
Layout
Presentation
Organization
Structure
Conventions
Standards
Templates
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 p...
Conventions
Use icons to label some task or action
Keep the same typography (font, size...) between the
same kind of conte...
Layout
Presentation
Organization
Structure
Conventions
Standards
Templates
Standards
W3C Recommendations
www.w3.org
CSS Valid (Cascading Style Sheets)
XHTML Valid (eXtended HyperText Markup Languag...
Layout
Presentation
Organization
Structure
Conventions
Standards
Templates
Templates
Pre-developed page layouts used:
to create new pages from the same design, pattern, or
style
to separate content...
Templates
Templates
Header
Logo + Baseline
Languages
1st level tranversal menu
Breadcrumbs
Center
Main content
Images + Videos
Foote...
Templates
View - Design
Layout
Interface
Aesthetic
Interface design is the
arrangement and makeup of how
a user can interact with a site
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
Eyetracking
Users spent a
longer amount of
time viewing the
original version
of the content
(left) but
remembered 34
perce...
Eyetracking
The image of the train did not get eye fixations.
Users did find the "top stories" and spent the most time the...
Eyetracking
The longest eye fixations
are on the area labeled
"News Releases," where
the main stories are and
where the si...
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
Components
Interface = where a person and a website touch
Usually built with visual components:
menus
buttons
drop-down li...
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
RIA
RIA = Rich Internet Application
Web applications that have the features and functionality of
traditional desktop appli...
RIA
Rich components:
Drag and drop
Sliders
Technologies:
Ajax
Flash
Silverlight
Drawbacks
Search engines may not be able t...
RIA
RIA
Useful when the web page provides a specific tool:
Image & video editing
Slideshows (Google Docs)
Music manager
Maybe ...
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
Navigation
Navigation system should remain consistent
Let the user figure out where he can go
Example - A menu bar should ...
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
Orientation
Users should always be able to work out where they are
on a site
Breadcrumbs (clickable)
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
URL
Use friendly, clean and explicit URL's
Prefer
http://www.mysite.com/section/my-article-title
Instead of
http://www.mys...
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
Search
You must provide a search engine for your content
Interface
Eyetracking
Components
RIA
Navigation
Orientation
URL
Search
KISS
KISS
Keep It Simple, Stupid
View - Design
Layout
Interface
Aesthetic
Aesthetic design is all about
getting the look right and
appropriate
Aesthetic
Themes & Skins
Colour Palettes
Rounded Shapes
Big Characters
Uncluttered Layout
Branding
Themes & Skins
Custom graphical appearances that can be
applied to a website in order to suit different
tastes
Themes & Skins
Themes & Skins
Aesthetic
Themes & Skins
Colour Palettes
Rounded Shapes
Big Characters
Uncluttered Layout
Branding
Colour Palettes
Aesthetic
Themes & Skins
Colour Palettes
Rounded Shapes
Big Characters
Uncluttered Layout
Branding
Rounded Shapes
Aesthetic
Themes & Skins
Colour Palettes
Rounded Shapes
Big Characters
Uncluttered Layout
Branding
Big Characters
Aesthetic
Themes & Skins
Colour Palettes
Rounded Shapes
Big Characters
Uncluttered Layout
Branding
Uncluttered Layout
Aesthetic
Themes & Skins
Colour Palettes
Rounded Shapes
Big Characters
Uncluttered Layout
Branding
Branding
Branding
Conclusion
View
Layout: Presentation
Menus? Submenus?
Sections?
Ratio of text vs graphics?
2-3 core services of the website?
Key vs s...
View
Layout: Organization
Try to design the sitemap based on the model
(only high level)
Define the menus based on the sit...
View
Layout: Structure
Go to ... and redesign the structure of the page
Think about the different items (pdf, video, html,...
View
Layout: Conventions
What conventions are required? Colours? Fonts?
Icons? Logo?
Layout: Standards
Are web standards r...
View
Layout: Templates
Image a generic template that could apply to the
majority or a significant number of pages.
Conside...
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Model-View-Controller
Controllers are in charge to
manage business processes and
workflows.
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Validation
Involve users
Get feedback
Start early in the process
Prototyping
Functional and usability testing
Schedule tes...
Functional Testing
Useful to check the behavior of the information system
Controllers are involved in the functional behav...
Functional Testing
Log in valid account:
Steps: go to the homepage and click the login link to
access the login form
Input...
Usability Testing
You can learn a lot by watching people
You should analyze:
how people use the website
how they digest th...
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
CMS
Content Management System
Software used to create, edit, manage, search and
publish various kinds of content (text, im...
CMS
Separation between content (model) and view
Templates & Themes
Comments
Workflow & Tasks => Collaboration
Versioning
P...
CMS
ECM
Entreprise Content Management
Software used to capture, manage, store, preserve, and
deliver content and documents rel...
ECM
Optical Character Recognition (OCR)
Document Sharing
Versioning, Backup, Archiving, Recovery, Lifecycle
Advanced Searc...
ECM
External Roles
Public
Private
(membership)
Internal Roles
Project Manager
Process Engineer
Developer
Web Designer
Tester
Webmaster
Editor
Moderator
Marketer
Communit...
Communities
Web 2.0
UGC
Prosumer
CrowdSourcing
Participation
Co-creation
Sharing
Conversations
C2C - P2P
Viral
Influencer
...
Social Media
Social Media
Direction of Information
People trust recommendations of their peers
Metrics
Website Traffic
RSS Subscriptions
Brand, Reputation, Trend, Conversation Tracking
Alerts
Competitive Monitoring & ...
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Tools
Roles:
Try to define the internal and external roles/profiles
Order them by importance
May any persons/employees hav...
Tools
Communities
What are your existing communities? Internal and
external ?
How could you benefit from social networks t...
Agenda
Definition & Dimensions
Living Processes
Research
Model
View
Controller
Validation
Tools
Maintenance
Maintenance
Your website becomes obsolete the day
you launch it
Mid-term and long-term strategy and objectives
Content gen...
THANK YOU
http://b-spirit.com/
info@b-spirit.com
Olivier Tripet Mathieu Favez
Credits
http://psdtuts.com/articles/6-interface-design-principles-and-tips-every-web-designer-should-
know/#more-1669
http...
Information Architecture
Upcoming SlideShare
Loading in...5
×

Information Architecture

1,998

Published on

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,998
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Information Architecture

  1. 1. Information Architecture 3-4 February 2009
  2. 2. Our Vision
  3. 3. Our Mission Bring innovative new ways of working to the enterprise by promoting online collaboration through modern web-based social platforms.
  4. 4. Our Values
  5. 5. Consulting Services Business Watch Knowledge Management Social Intelligence Online Strategy
  6. 6. Software, Open Source, SaaS
  7. 7. Other Services Watch Community Management Online Presence Content Creation Marketing 2.0 Training Support
  8. 8. What is this strange bear?
  9. 9. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  10. 10. Technique & Profession content IA balances the characteristics and needs of users, content and context context users IA
  11. 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. 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. 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!
  14. 14. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  15. 15. Content Data Information Meaning Information is data that has been processed for use
  16. 16. Content (bis) Data Information Knowledge Meaning Understanding Knowledge is information that is understood and integrated
  17. 17. Users Continuing to use Using Discovering
  18. 18. IA Validate Design Research
  19. 19. IA Validate Design Research Understand the audience and context Use research to solve the problem Test the design against the requirements
  20. 20. Project Launch Build Visual Design Requirements Strategy & Scoping
  21. 21. IA in a Project Launch Build Visual Design Requirements Design Validate Strategy & Scoping Research
  22. 22. Measure Objectives Outcome Output
  23. 23. Measured IA in a Project Launch Build Visual Design Requiremnts Design Validation Research Outcome Output Objectives Strategy & Scoping
  24. 24. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  25. 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?
  26. 26. User Research Techniques Interviews Practice reviews Surveys Focus groups Market analysis Web analytics Sales data analysis (CRM)
  27. 27. Research Users come first !
  28. 28. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  29. 29. Model-View-Controller
  30. 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
  31. 31. Type of Content News Docs Resources Profile s Events
  32. 32. Language Plain vs ... Legalese Technical Esoteric Promotional Summarized vs ... Detailed Verbous Lengthy
  33. 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.
  34. 34. Format for Computers <XML>
  35. 35. Classification by date:
  36. 36. Classification alphabetical:
  37. 37. Classification by geo:
  38. 38. Classification by task:
  39. 39. Classification by audience, readership:
  40. 40. Classification with tags:
  41. 41. Classification by topic:
  42. 42. Structure: Hierarchy Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  43. 43. Structure: Database Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  44. 44. Structure: Heuristic Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  45. 45. Structure: Organic Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  46. 46. Structure: Conceptual Credits: Donna Spencer Source: http://www.slideshare.net/donnam/information- architecture-a-how-to
  47. 47. Internationalisation Languages: English French Spanish German Chinese Etc Cultures: European American Asian Latin World-wide Dev'ed vs dev'ing Etc Localisation: Currencies Date formats Content Number formats Time shifts
  48. 48. Language Can be based upon... User Preferences Physical Address IP Address Web Browser Settings Operating System
  49. 49. Culture Influences... Content Wording Tone Presentation References Priorities
  50. 50. Localisation Determines... Currencies Date formats Content Number formats Time shifts Text in images
  51. 51. Taxonomy = Predefined Tagging = many-to-many categorisation
  52. 52. Many-to-many
  53. 53. Folksonomy = User Defined Tagging --> Collaborative Tagging
  54. 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. 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. 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. 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.
  58. 58. Licensing Creative Commons (better for multimedia works)
  59. 59. Licensing Copyleft and Creative Commons licenses ensure open access and dissemination of scientific, cultural, artistic content regardless of the social classes.
  60. 60. Navigation Structure Search Site map Documentation Cross-linking Cross-referencing Contexts Related content Advice: Design browse structures Design the front page last Provide different paths Link-rich pages
  61. 61. Pagination Number of search results per page Length Criteria: alpha, relevance, popularity, date, etc Content Highlight
  62. 62. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  63. 63. Model Activities Meetings Publications News Projects External Links Information (what information?) Type of content:
  64. 64. Model Plain English Technical? Legal? Conversational? Summaries vs detailed? Language:
  65. 65. Model PDF PDF to HTML? Videos? Audios? Images? Slideshows? RSS? Format:
  66. 66. Model Classification: By date -> calendar (meetings) By topic (activities, ...) By language (projects) By geo (meetings) By tag? Other?
  67. 67. Model Structure: What is the best model? One or several models? Try to make a sketch
  68. 68. Model Internationalisation: Language: Language of content Language of website Culture: World-wide Eastern vs Western Developed vs developing countries Localisation ?
  69. 69. Model Taxonomy: Is it necessary for your needs? Taxonomy vs folksonomy? Existing rules? Categories? Evolution of taxonomy? Add? Remove?
  70. 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?
  71. 71. Model Licensing: Copyright? Copyleft? Creative Commons? Use? Copy? Modify? Distribute? Attribution? Derivative work? Commercial use? What is the best solution for you?
  72. 72. Model Navigation: What are / should be the different paths to access information? Search? Site map? Cross-linking? Contexts? Related content?
  73. 73. Model Pagination: What type of content is likely to require pagination? What criteria should be used to sort results? Should results be highlighted?
  74. 74. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  75. 75. Model-View-Controller
  76. 76. Design
  77. 77. View - Design Layout Interface Aesthetic
  78. 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
  79. 79. Layout Presentation Organization Structure Conventions Standards Templates
  80. 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. 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
  82. 82. Presentation
  83. 83. Layout Presentation Organization Structure Conventions Standards Templates
  84. 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. 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. 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
  87. 87. Organization Standard sitemap
  88. 88. Organization Sitemap using MindMapping
  89. 89. Layout Presentation Organization Structure Conventions Standards Templates
  90. 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. 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
  92. 92. Structure
  93. 93. Layout Presentation Organization Structure Conventions Standards Templates
  94. 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. 95. Conventions Use icons to label some task or action Keep the same typography (font, size...) between the same kind of content
  96. 96. Layout Presentation Organization Structure Conventions Standards Templates
  97. 97. Standards W3C Recommendations www.w3.org CSS Valid (Cascading Style Sheets) XHTML Valid (eXtended HyperText Markup Language) RSS & Atom Valid (Really Simple Syndication) WCAG (Web Content Accessibility Guidelines) MWI (Mobile Web Initiative)
  98. 98. Layout Presentation Organization Structure Conventions Standards Templates
  99. 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
  100. 100. Templates
  101. 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
  102. 102. Templates
  103. 103. View - Design Layout Interface Aesthetic
  104. 104. Interface design is the arrangement and makeup of how a user can interact with a site
  105. 105. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  106. 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. 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. 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.
  109. 109. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  110. 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)
  111. 111. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  112. 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. 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
  114. 114. RIA
  115. 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
  116. 116. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  117. 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
  118. 118. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  119. 119. Orientation Users should always be able to work out where they are on a site Breadcrumbs (clickable)
  120. 120. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  121. 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
  122. 122. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  123. 123. Search You must provide a search engine for your content
  124. 124. Interface Eyetracking Components RIA Navigation Orientation URL Search KISS
  125. 125. KISS Keep It Simple, Stupid
  126. 126. View - Design Layout Interface Aesthetic
  127. 127. Aesthetic design is all about getting the look right and appropriate
  128. 128. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  129. 129. Themes & Skins Custom graphical appearances that can be applied to a website in order to suit different tastes
  130. 130. Themes & Skins
  131. 131. Themes & Skins
  132. 132. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  133. 133. Colour Palettes
  134. 134. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  135. 135. Rounded Shapes
  136. 136. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  137. 137. Big Characters
  138. 138. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  139. 139. Uncluttered Layout
  140. 140. Aesthetic Themes & Skins Colour Palettes Rounded Shapes Big Characters Uncluttered Layout Branding
  141. 141. Branding
  142. 142. Branding
  143. 143. Conclusion
  144. 144. View Layout: Presentation Menus? Submenus? Sections? Ratio of text vs graphics? 2-3 core services of the website? Key vs secondary information? How easily can one find the relevant info?
  145. 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. 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?
  147. 147. View Layout: Conventions What conventions are required? Colours? Fonts? Icons? Logo? Layout: Standards Are web standards required and/or useful?
  148. 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.
  149. 149. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  150. 150. Model-View-Controller
  151. 151. Controllers are in charge to manage business processes and workflows.
  152. 152. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  153. 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. 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. 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. 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%
  157. 157. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  158. 158. CMS Content Management System Software used to create, edit, manage, search and publish various kinds of content (text, image, vidéo, audio, documents...) Access & Identification Roles & Responsabilities Editor WYSIWYG Taxonomy & Folksonomy
  159. 159. CMS Separation between content (model) and view Templates & Themes Comments Workflow & Tasks => Collaboration Versioning Plugins Open Source
  160. 160. CMS
  161. 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. 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
  163. 163. ECM
  164. 164. External Roles Public Private (membership)
  165. 165. Internal Roles Project Manager Process Engineer Developer Web Designer Tester Webmaster Editor Moderator Marketer Community Manager Competitive Monitoring & Strategic Watch Traffic Manager
  166. 166. Communities Web 2.0 UGC Prosumer CrowdSourcing Participation Co-creation Sharing Conversations C2C - P2P Viral Influencer Engage Widgets Digital Natives Social Networks (e.g. Facebook)
  167. 167. Social Media
  168. 168. Social Media
  169. 169. Direction of Information People trust recommendations of their peers
  170. 170. Metrics Website Traffic RSS Subscriptions Brand, Reputation, Trend, Conversation Tracking Alerts Competitive Monitoring & Strategic Watch
  171. 171. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  172. 172. Tools Roles: Try to define the internal and external roles/profiles Order them by importance May any persons/employees have different profiles?
  173. 173. 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 ?
  174. 174. Agenda Definition & Dimensions Living Processes Research Model View Controller Validation Tools Maintenance
  175. 175. 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
  176. 176. THANK YOU http://b-spirit.com/ info@b-spirit.com Olivier Tripet Mathieu Favez
  177. 177. Credits http://psdtuts.com/articles/6-interface-design-principles-and-tips-every-web-designer-should- know/#more-1669 http://blog.kinoa.com/2008/12/05/reussir-sa-page-web-les-bons-ingredients/ http://blog.kinoa.com/2008/10/07/10-astuces-pour-optimiser-vos-contenus-sur-le-net/ http://en.wikipedia.org/wiki/File:TempEngWeb017b.svg http://www.ojr.org/ojr/stories/070312ruel/ http://www.readwriteweb.com/archives/report_social_web_usage_tipped_2008.php

×