We architect information and design radically
simple, future-proof websites.
Slide 5
Slide 5 text
Web
Communication and Publishing Medium
Slide 6
Slide 6 text
“Content Driven”
Informational Websites
Slide 7
Slide 7 text
Flexible. Scalable. Lasting.
Design
Slide 8
Slide 8 text
Flexible. Scalable. Lasting.
Design
information grows
information stays
information changes
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Mess
Slide 12
Slide 12 text
Who does it affect?
Slide 13
Slide 13 text
1. Website Users
can’t find what they want
Slide 14
Slide 14 text
– Ambient Findability by Peter Morville
“Findability precedes usability. In the alphabet and
on the Web. You can’t use what you can’t find.”
Slide 15
Slide 15 text
2. Content Managers
make it messier without realising
Slide 16
Slide 16 text
Information Architecture
Slide 17
Slide 17 text
– The Information Architecture Institute
“Information architecture is the practice of
deciding how to arrange the parts of
something to be understandable.”
Slide 18
Slide 18 text
History of IA
Abby Covert
10th Annual Euro IA Summit, Brussels
http://abbytheia.com/2014/09/27/euroia/
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
IA is evolving
and is more relevant than ever
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Structure. Organise. Label.
Slide 25
Slide 25 text
Structured Content
Information or content that is organised in a predictable
way and is usually classified with metadata.
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Talk. Extensively.
And put everything on the table
Slide 28
Slide 28 text
For example,
let’s look at a conference website.
Slide 29
Slide 29 text
Event, Subject
Dates, Times
Venue
Speakers, Organisers, Attendees
Introduction, Need, Value
What?
When?
Where?
Who?
Why?
Slide 30
Slide 30 text
Event Name
Date
Venue
Speakers
Organisers
Attendees
Topics
Talks
Schedule
Sponsors
Hotels
Policies
Blogposts
Local Information
Tickets
Slide 31
Slide 31 text
OOUX
Object Oriented UX
Slide 32
Slide 32 text
Identify the Objects
(Content Types)
Slide 33
Slide 33 text
It this a real-world thing? A noun?
What attributes will this have?
Will this be made up of lots of that?
How will this talk to that?
Can this inherit from that?
Can they be grouped, arranged or categorised?
Is this chronological or spatial or tabular?
Does alphabetical make sense?
Is there a hierarchy?
Can it be archived?
…
Is this an object?
Slide 34
Slide 34 text
Event Name
Date
Venue
Speakers
Organisers
Attendees
Topics
Talks
Schedule
Sponsors
Hotels
Policies
Blogposts
Local Information
Tickets
Slide 35
Slide 35 text
Event Name
Date
Venue
Speakers
Organisers
Attendees
Topics
Talks
Schedule
Sponsors
Hotels
Policies
Blogposts
Local Information
Tickets
Event Metadata
Humans
Platinum, Gold, Silver, … [Room + Time-Slot + T
alk]
Slide 36
Slide 36 text
Name the Objects
(Labelling)
Slide 37
Slide 37 text
Event Name
Date
Venue
Speakers
Organisers
Attendees
Topics
Talks
Schedule
Sponsors
Hotels
Policies
Blogposts
Local Information
Tickets
Event Metadata
Humans
Platinum, Gold, Silver, … [Room + Time-Slot + T
alk]
Slide 38
Slide 38 text
Event Name
Date
Venue
Speakers
Organisers
Attendees
Topics
Talks
Schedule
Sponsors
Hotels
Policies
Blogposts
Local Information
Tickets
Event Metadata
[Room + Time-Slot + T
alk]
“Person”
Platinum, Gold, Silver, …
“Session”
Slide 39
Slide 39 text
Define the Objects
(Content Modelling)
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Person
Photo
Name
Organisation
Designation
Bio
Twitter
LinkedIn
SPEAKER
Name
Organisation
Designation
ATTENDEE
Name
Designation
Bio
Contact No.
ORGANISER
Slide 42
Slide 42 text
Name*
Role* [Organiser, Attendee, Speaker]
Designation
Photo
Organisation
Bio
Twitter
LinkedIn
Contact No.
PERSON
• Full Talk
• Crisp Talk
• Flash Talk
• BoF
• Workshop
Name
Duration
Format
No. of Speakers
SESSION TYPE
Slide 49
Slide 49 text
Review
Slide 50
Slide 50 text
Event Name
Date
Venue
Speakers
Organisers
Attendees
Topics
Talks
Schedule
Sponsors
Hotels
Policies
Blogposts
Local Information
Tickets
Event Metadata
[Room + Time-Slot + T
alk]
“Person”
Platinum, Gold, Silver, …
“Session”
Slide 51
Slide 51 text
Event Name
Date
Venue
Speakers
Organisers
Attendees
Topics
Talks
Schedule
Sponsors
Hotels
Policies
Blogposts
Local Information
Tickets
Event Metadata
“Person”
Platinum, Gold, Silver, …
“Authors”
[Room + Time-Slot + T
alk]
“Session”
Slide 52
Slide 52 text
Repeat
until… aha!
Slide 53
Slide 53 text
• Single
• Flat
• Index
• Daisy
• Strict Hierarchy
• Multidimensional Hierarchy
• …
Slide 54
Slide 54 text
Objects, Collections
and Relationships.
Well defined, and labelled.
Slide 55
Slide 55 text
IA ≠ Navigation
Slide 56
Slide 56 text
IA informs Navigation
Slide 57
Slide 57 text
Navigation is merely
a window into the IA,
based on user needs
Slide 58
Slide 58 text
Role of IA
• primarily to focus on the structure of information, and sometimes
the design of the actual user interface (wireframes)
• to understand how people actually use content and how the
structure should function to support that
• to grasp the range of content and functionality on a project and
how that needs to be structured
http://www.webdesignerdepot.com/2015/02/the-ultimate-guide-to-information-architecture/
Slide 59
Slide 59 text
A Robust
Mental Model
Slide 60
Slide 60 text
8 Principles of IA
Dan Brown
https://www.asis.org/Bulletin/Aug-10/AugSep10_Brown.pdf
Slide 61
Slide 61 text
Capturing Content
Slide 62
Slide 62 text
Content Management System
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
51% of the Internet
is built on WordPress
Slide 68
Slide 68 text
Pick a CMS that can capture and
represent the IA as accurately as possible
Content Types, Models and Relationships
Slide 69
Slide 69 text
DRY
Don’t Repeat Yourself
Slide 70
Slide 70 text
COPE
Create Once, Publish Everywhere
Slide 71
Slide 71 text
Data Modelling
Slide 72
Slide 72 text
Translate Content Models
into Data Models
Slide 73
Slide 73 text
Translate Content Models
into Data Models
how is the content understood and used?
how does is content stored?
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
EVENT DATE PLACE
JSFoo 2016 15-16 September MLR, JP Nagar, Bangalore
Day {Number}
Start {Datetime}
End {Datetime}
Auditorium {String}
Locality {String}
City {String}
Longitude {Number}
Latitude {Number}
Title {String}
Edition {Number}
Slide 76
Slide 76 text
Style
Semantics
Slide 77
Slide 77 text
Style
Semantics
Slide 78
Slide 78 text
WYSIWYG
☠
Slide 79
Slide 79 text
Presenting Content
Slide 80
Slide 80 text
Pages
Slide 81
Slide 81 text
Pages
cloud information
Slide 82
Slide 82 text
Pages
are hard to scale without mess
Slide 83
Slide 83 text
Pages
are turning obsolete
Slide 84
Slide 84 text
Pages
are a broken unit
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
Patterns
based on a design system
Slide 87
Slide 87 text
Pattern Lab + Atomic Design System
http://patternlab.io
Slide 88
Slide 88 text
Discovering Content
Slide 89
Slide 89 text
Navigation
Slide 90
Slide 90 text
We’re moving from
hierarchy to heterarchy
Slide 91
Slide 91 text
We’re moving from
deep drill-downs to lateral hops
Slide 92
Slide 92 text
Navigation is undergoing
fundamental evolution
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
Home page
Slide 95
Slide 95 text
Well, that too’s going
Slide 96
Slide 96 text
Users
• Some users know what they’re looking for.
• Some users are exploring.
• Both are happy to discover relevant
(or related) content.
Slide 97
Slide 97 text
Facilitating Discovery
• Make everything addressable
• Aggressively expose relationships in current
context
• Show examples (a teaser) of the interlinked
content
Slide 98
Slide 98 text
Design System
Slide 99
Slide 99 text
Identifying Design Patterns
Slide 100
Slide 100 text
What makes something
a pattern?
Slide 101
Slide 101 text
1. Elementary visual language (purely stylistic)
2. Different forms to represent an object —
standalone, in a group or in association.
Slide 102
Slide 102 text
Reusable
Slide 103
Slide 103 text
Recursive
Slide 104
Slide 104 text
Responsive
Slide 105
Slide 105 text
A Simple Scalable Paradigm
Slide 106
Slide 106 text
Each object and collection needs to be represented in
broadly 3 forms—
1. How is it presented on its own address?
2. How is it presented in a collection?
3. How is it presented as an association to other objects?
Slide 107
Slide 107 text
Object
(on its own address)
Slide 108
Slide 108 text
Object
in an Object
Slide 109
Slide 109 text
Collection
(object-agnostic)
Slide 110
Slide 110 text
Collection
in a Collection
Slide 111
Slide 111 text
Object
in a Collection
Slide 112
Slide 112 text
Collection
in an Object
Slide 113
Slide 113 text
Give labels to these views
Slide 114
Slide 114 text
Detail
(an object on its
own address)
Slide 115
Slide 115 text
Embed
Slide 116
Slide 116 text
List
Slide 117
Slide 117 text
Teaser
Slide 118
Slide 118 text
Anticipate Empty Attributes
Slide 119
Slide 119 text
Firstname Lastname
DESIGNATION Organisation
This is the bio of the person.
Has 5 years experience in Web,
Architechture…
Slide 120
Slide 120 text
Firstname Lastname
DESIGNATION Organisation
Slide 121
Slide 121 text
Firstname Lastname
DESIGNATION
Slide 122
Slide 122 text
Firstname Lastname
DESIGNATION
Slide 123
Slide 123 text
Graceful Fallback Templates
“post” or “page”
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
Simple. Pretty Scalable.
Slide 126
Slide 126 text
Content Managers and Authors
Want Flexibility
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
Authoring Flexibility
vs
Design Control
Slide 129
Slide 129 text
How do we balance our
need to control?
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
Capture chunks, not blobs
the more granular, the better
Slide 132
Slide 132 text
Expose Content Types
capture structured data
Slide 133
Slide 133 text
Expose Visual Patterns
“containerised” styles
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
No content
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
IA is “presentation”agnostic
Slide 144
Slide 144 text
Information can truly be living
Slide 145
Slide 145 text
JSFoo
15—16th September, 2016
M.L.R. Convention Centre, J.P. Nagar
JavaScript Conference in Bangalore
Slide 146
Slide 146 text
JSFoo
15—16th September, 2016
Bangalore, India
JavaScript Conference
Slide 147
Slide 147 text
JSFoo
15—16th September, 2016
India
JavaScript Conference
Slide 148
Slide 148 text
JSFoo
15—16th September, 2016
M.L.R. Convention Centre, J.P. Nagar
JavaScript Conference in Namma Bengaluru
Slide 149
Slide 149 text
JSFoo
15—16th September, 2016
M.L.R. Convention Centre, J.P. Nagar
JavaScript Conference. 10kms from you.
Slide 150
Slide 150 text
JSFoo
2 days to go
M.L.R. Convention Centre, J.P. Nagar
JavaScript Conference. 10kms from you.
Slide 151
Slide 151 text
JSFoo
2 days to go
M.L.R. Convention Centre, J.P. Nagar
JavaScript Conference. See you next year.
Slide 152
Slide 152 text
Information Architecture
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
Design Implementation
Slide 155
Slide 155 text
Good IA is robust
and extensible
Slide 156
Slide 156 text
Talking
to other sytems, and yours
Slide 157
Slide 157 text
Findable
Slide 158
Slide 158 text
Understandable
Slide 159
Slide 159 text
Living
Slide 160
Slide 160 text
Powerful
Slide 161
Slide 161 text
Timeless
Slide 162
Slide 162 text
Future Friendly
Slide 163
Slide 163 text
A free mind
approach
Slide 164
Slide 164 text
No content
Slide 165
Slide 165 text
• wtf-am-i-supposed-to-do-wit by kris krüg from Flickr
https://www.flickr.com/photos/kk/18768224/
• Artificial Intelligence by Maximilian Becker from the Noun Project
https://thenounproject.com/term/artificial-intelligence/81056
• Web Nodes by Oliviu Stoian from the Noun Project
https://thenounproject.com/term/web-nodes/575017
• Document by Maximilian Becker from the Noun Project
https://thenounproject.com/term/document/5718
https://thenounproject.com/term/document/5713
• User by Vivian Ziereisen from the Noun Project
https://thenounproject.com/term/user/39208
• jigsaw puzzle by Davo Sime from the Noun Project
https://thenounproject.com/term/jigsaw-puzzle/614233
• Bridge by RomanP from the Noun Project
https://thenounproject.com/term/bridge/366586
• information by gato-gato-gato from Flickr
https://www.flickr.com/photos/gato-gato-gato/12851862915/