Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Architecting Content Driven Websites

Souvik Das Gupta
September 17, 2016

Architecting Content Driven Websites

Tasteful visual design is merely the tip of the design iceberg to deliver a great experience for content driven websites. What’s needed is a robust strategy around structuring information and presentation. This talk explores the iceberg that remains underwater — from architecting information, to achieving balance between flexibility for content managers and control for designers — and suggests an approach towards designing and scaling informational websites.

Talk recording: https://youtu.be/aGCRWBWwuDg

Souvik Das Gupta

September 17, 2016
Tweet

More Decks by Souvik Das Gupta

Other Decks in Design

Transcript

  1. Architecting
    Content Driven
    Websites

    View full-size slide

  2. We architect information and design radically
    simple, future-proof websites.

    View full-size slide

  3. Web
    Communication and Publishing Medium

    View full-size slide

  4. “Content Driven”
    Informational Websites

    View full-size slide

  5. Flexible. Scalable. Lasting.
    Design

    View full-size slide

  6. Flexible. Scalable. Lasting.
    Design
    information grows
    information stays
    information changes

    View full-size slide

  7. Who does it affect?

    View full-size slide

  8. 1. Website Users
    can’t find what they want

    View full-size slide

  9. – Ambient Findability by Peter Morville
    “Findability precedes usability. In the alphabet and
    on the Web. You can’t use what you can’t find.”

    View full-size slide

  10. 2. Content Managers
    make it messier without realising

    View full-size slide

  11. Information Architecture

    View full-size slide

  12. – The Information Architecture Institute
    “Information architecture is the practice of
    deciding how to arrange the parts of
    something to be understandable.”

    View full-size slide

  13. History of IA
    Abby Covert
    10th Annual Euro IA Summit, Brussels
    http://abbytheia.com/2014/09/27/euroia/

    View full-size slide

  14. IA is evolving
    and is more relevant than ever

    View full-size slide

  15. Structure. Organise. Label.

    View full-size slide

  16. Structured Content
    Information or content that is organised in a predictable
    way and is usually classified with metadata.

    View full-size slide

  17. Talk. Extensively.
    And put everything on the table

    View full-size slide

  18. For example,
    let’s look at a conference website.

    View full-size slide

  19. Event, Subject
    Dates, Times
    Venue
    Speakers, Organisers, Attendees
    Introduction, Need, Value
    What?
    When?
    Where?
    Who?
    Why?

    View full-size slide

  20. Event Name
    Date
    Venue
    Speakers
    Organisers
    Attendees
    Topics
    Talks
    Schedule
    Sponsors
    Hotels
    Policies
    Blogposts
    Local Information
    Tickets

    View full-size slide

  21. OOUX
    Object Oriented UX

    View full-size slide

  22. Identify the Objects
    (Content Types)

    View full-size slide

  23. 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?

    View full-size slide

  24. Event Name
    Date
    Venue
    Speakers
    Organisers
    Attendees
    Topics
    Talks
    Schedule
    Sponsors
    Hotels
    Policies
    Blogposts
    Local Information
    Tickets

    View full-size slide

  25. 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]

    View full-size slide

  26. Name the Objects
    (Labelling)

    View full-size slide

  27. 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]

    View full-size slide

  28. 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”

    View full-size slide

  29. Define the Objects
    (Content Modelling)

    View full-size slide

  30. Person
    Photo
    Name
    Organisation
    Designation

    Bio
    Twitter
    LinkedIn
    SPEAKER
    Name
    Organisation
    Designation

    ATTENDEE
    Name
    Designation
    Bio
    Contact No.

    ORGANISER

    View full-size slide

  31. Name*
    Role* [Organiser, Attendee, Speaker]
    Designation
    Photo
    Organisation
    Bio
    Twitter
    LinkedIn
    Contact No.
    PERSON

    View full-size slide

  32. Organise the Objects

    View full-size slide

  33. Identify Relationships
    Homogenous or Hetrogenous

    View full-size slide

  34. Title*
    Description*
    Type* [Full, Crisp, Workshop,…]
    Slides
    Topic
    Speaker → [{Person}, {Person}]
    Related Talk → [{Talk}, {Talk}]

    TALK

    View full-size slide

  35. Treat Taxonomies as Objects

    View full-size slide

  36. • Full Talk
    • Crisp Talk
    • Flash Talk
    • BoF
    • Workshop
    Name
    Duration
    Format
    No. of Speakers

    SESSION TYPE

    View full-size slide

  37. 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”

    View full-size slide

  38. 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”

    View full-size slide

  39. Repeat
    until… aha!

    View full-size slide

  40. • Single
    • Flat
    • Index
    • Daisy
    • Strict Hierarchy
    • Multidimensional Hierarchy
    • …

    View full-size slide

  41. Objects, Collections
    and Relationships.
    Well defined, and labelled.

    View full-size slide

  42. IA ≠ Navigation

    View full-size slide

  43. IA informs Navigation

    View full-size slide

  44. Navigation is merely
    a window into the IA,
    based on user needs

    View full-size slide

  45. 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/

    View full-size slide

  46. A Robust
    Mental Model

    View full-size slide

  47. 8 Principles of IA
    Dan Brown
    https://www.asis.org/Bulletin/Aug-10/AugSep10_Brown.pdf

    View full-size slide

  48. Capturing Content

    View full-size slide

  49. Content Management System

    View full-size slide

  50. 51% of the Internet
    is built on WordPress

    View full-size slide

  51. Pick a CMS that can capture and
    represent the IA as accurately as possible
    Content Types, Models and Relationships

    View full-size slide

  52. DRY
    Don’t Repeat Yourself

    View full-size slide

  53. COPE
    Create Once, Publish Everywhere

    View full-size slide

  54. Data Modelling

    View full-size slide

  55. Translate Content Models
    into Data Models

    View full-size slide

  56. Translate Content Models
    into Data Models
    how is the content understood and used?
    how does is content stored?

    View full-size slide

  57. 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}

    View full-size slide

  58. Style
    Semantics

    View full-size slide

  59. Style
    Semantics

    View full-size slide

  60. Presenting Content

    View full-size slide

  61. Pages
    cloud information

    View full-size slide

  62. Pages
    are hard to scale without mess

    View full-size slide

  63. Pages
    are turning obsolete

    View full-size slide

  64. Pages
    are a broken unit

    View full-size slide

  65. Patterns
    based on a design system

    View full-size slide

  66. Pattern Lab + Atomic Design System
    http://patternlab.io

    View full-size slide

  67. Discovering Content

    View full-size slide

  68. We’re moving from
    hierarchy to heterarchy

    View full-size slide

  69. We’re moving from
    deep drill-downs to lateral hops

    View full-size slide

  70. Navigation is undergoing
    fundamental evolution

    View full-size slide

  71. Well, that too’s going

    View full-size slide

  72. Users
    • Some users know what they’re looking for.
    • Some users are exploring.
    • Both are happy to discover relevant

    (or related) content.

    View full-size slide

  73. Facilitating Discovery
    • Make everything addressable
    • Aggressively expose relationships in current
    context
    • Show examples (a teaser) of the interlinked
    content

    View full-size slide

  74. Design System

    View full-size slide

  75. Identifying Design Patterns

    View full-size slide

  76. What makes something
    a pattern?

    View full-size slide

  77. 1. Elementary visual language (purely stylistic)
    2. Different forms to represent an object —
    standalone, in a group or in association.

    View full-size slide

  78. A Simple Scalable Paradigm

    View full-size slide

  79. 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?

    View full-size slide

  80. Object
    (on its own address)

    View full-size slide

  81. Object
    in an Object

    View full-size slide

  82. Collection
    (object-agnostic)

    View full-size slide

  83. Collection
    in a Collection

    View full-size slide

  84. Object
    in a Collection

    View full-size slide

  85. Collection
    in an Object

    View full-size slide

  86. Give labels to these views

    View full-size slide

  87. Detail
    (an object on its
    own address)

    View full-size slide

  88. Anticipate Empty Attributes

    View full-size slide

  89. Firstname Lastname
    DESIGNATION Organisation
    This is the bio of the person.
    Has 5 years experience in Web,
    Architechture…

    View full-size slide

  90. Firstname Lastname
    DESIGNATION Organisation

    View full-size slide

  91. Firstname Lastname
    DESIGNATION

    View full-size slide

  92. Firstname Lastname
    DESIGNATION

    View full-size slide

  93. Graceful Fallback Templates
    “post” or “page”

    View full-size slide

  94. Simple. Pretty Scalable.

    View full-size slide

  95. Content Managers and Authors
    Want Flexibility

    View full-size slide

  96. Authoring Flexibility
    vs
    Design Control

    View full-size slide

  97. How do we balance our
    need to control?

    View full-size slide

  98. Capture chunks, not blobs
    the more granular, the better

    View full-size slide

  99. Expose Content Types
    capture structured data

    View full-size slide

  100. Expose Visual Patterns
    “containerised” styles

    View full-size slide

  101. IA is “presentation”agnostic

    View full-size slide

  102. Information can truly be living

    View full-size slide

  103. JSFoo

    15—16th September, 2016
    M.L.R. Convention Centre, J.P. Nagar
    JavaScript Conference in Bangalore

    View full-size slide

  104. JSFoo

    15—16th September, 2016
    Bangalore, India
    JavaScript Conference

    View full-size slide

  105. JSFoo

    15—16th September, 2016
    India
    JavaScript Conference

    View full-size slide

  106. JSFoo

    15—16th September, 2016
    M.L.R. Convention Centre, J.P. Nagar
    JavaScript Conference in Namma Bengaluru

    View full-size slide

  107. JSFoo

    15—16th September, 2016
    M.L.R. Convention Centre, J.P. Nagar
    JavaScript Conference. 10kms from you.

    View full-size slide

  108. JSFoo

    2 days to go
    M.L.R. Convention Centre, J.P. Nagar
    JavaScript Conference. 10kms from you.

    View full-size slide

  109. JSFoo

    2 days to go
    M.L.R. Convention Centre, J.P. Nagar
    JavaScript Conference. See you next year.

    View full-size slide

  110. Information Architecture

    View full-size slide

  111. Design Implementation

    View full-size slide

  112. Good IA is robust
    and extensible

    View full-size slide

  113. Talking
    to other sytems, and yours

    View full-size slide

  114. Understandable

    View full-size slide

  115. Future Friendly

    View full-size slide

  116. A free mind
    approach

    View full-size slide

  117. • 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/

    View full-size slide