The future of experiences and Drupal
ユーザー体験とドルーパルの将来

プレストン・ソー • 2018年 11月 17日 • DrupalCamp DEN Japan 2018 基調講演

はじめまして！
プレストン・ソーはイノベーションリーダー、研究者、スピーカー、そして「Decoupled Drupal in Practice (Apress 2018年)」の著者です。
Decoupled Drupalの世界的なリーダーであり、 Decentralized Webや会話形デザインの専門家でもあります。プレストンは、 Acquia Inc.（アクイア社）でリサーチ・アンド・イノベーションディレクターを務めており、イノベーションセンターであるアクイアラボを率い、ネスレやジョージア州政府などのプロジェクトにて次世代のアーキテクチャの開発に貢献しています。
過去2回にわたり、SXSWインタラクティブで講演し、大陸にて 3つの言語で基調講演をおこなう人気スピーカーでもあります。
preston.so@acquia.com • @prestonso • #futuredrupal

Welcome!
Preston So is an innovation lead, researcher, speaker, and author of
Decoupled Drupal in Practice (Apress, 2018).
A globally recognized voice on decoupled Drupal and subject matter
expert in the decentralized web and conversational design, Preston is
Director of Research and Innovation at Acquia, where he helms
Acquia Labs, an innovation center architecting projects for clients likethe State of Georgia and Nestlé Purina.
Having spoken twice at SXSW Interactive, Preston is a sought-after
presenter with keynotes on four continents and in three languages.
preston.so@acquia.com • @prestonso • #futuredrupal

Decoupled Drupal in PracticePre-order now:
tiny.cc/decoupled-in-practiceIn the first and only comprehensive guide to
decoupled Drupal across the stack, with a foreword
by Drupal project lead Dries Buytaert, learn
everything you need to know about decoupled
Drupal—from building the back end and designing
APIs to integrating with front-end technologies.

4

We're Acquia's innovation lab — a small team ofgeneralist engineers building pioneering projects
that push the envelope in emerging technologies.
Have forward-looking ideas but need expertise?
Acquia Labs is your innovation partner.

© 2017 Acquia Inc. — Confidential and Proprietary

What we'll cover
●
●
●
●
●
●

A history of content in Drupal
Constructing conversational content
From a page-driven to a geospatial mentality
Augmented and virtual reality
Smart infrastructure and digital signage
Epilogue: The future of Drupal

1

A history ofcontent in Drupal

Websites●●●●

Drop.org

Large swaths of primarily
narrative text
Images interspersed throughout
and sometimes span viewport
Multimedia scoped tightly to
areas of page; videos are largely
synonymous with images
Interactions via keyboard andmouse2000

WebsitesDrupal 1.0 released
Drupal 3.0 released2001

Websites

Drupal 4.0 released2002Websites

Drupal 6.0 released2008Websites
MobileResponsive●●●●

SparkLarge swaths of text spanviewport
Images span viewport
Multimedia spans viewport
Interactions via gestures

At right: Mobile-first editing

2012

MobileDrupal iOS SDK
first released
Now known as Waterwheel.swift

2012Wearables

Wearables

Apple Watch
●
●
●
●
●

Limited real estate means limited
coexistence
Limited text spans viewport
Images span viewport
Multimedia spans viewport
Interactions via gestures

2015

Digital signage

Digital signageUniversity of Iowa
campus signage
●
●
●
●
●

Need for legibility means limited
coexistence
Limited text spans viewport
Images span viewport
Multimedia spans viewport
No direct interaction except
some gestures2016

Set-top boxes

Drupal serves Roku
●
●
●
●
●

Content display is locked down;
limited design
Limited text according totemplate
Images according to template
Multimedia according totemplate
Interactions via remote2017Augmented realityAugmented reality

Shopping withaugmented reality
●
●
●
●
●

More flexible design, but content
is situational and contextual
Limited text superimposed basedon context
Images superimposed based oncontext
Multimedia superimposed basedon context
Interactions via gestures andmotion (content proprioception)

2017

Conversational interfaces

Conversational

Ask GeorgiaGov●●●●●Content is inaccessible without
particular track
Limited text as self-containedutterances
No images
No multimedia except audio
Interactions via dialogue (zerouser interface)2017

Ask GeorgiaGov is a new Alexa skill which gives citizens of thestate of Georgia answers to questions about popular state
government topics such as how to renew a driver's license,
how to register to vote, how to enroll a child in pre-K
programs, and even who Georgia's governor is.

DemoAlexa, ask GeorgiaGov

Alexa, ask GeorgiaGovWhat's next?

2Constructing
conversational content

Web vs. conversational content
Link

Link

IntentLink

Link

Web content

Predominantly prose
Screen-based, visual
Link- and reference-richHigh verbosity tolerance

IntentLink

Conversational content
Single, brief thoughts
Aural, zero user interface
Link- and reference-poor
Low verbosity tolerance

Information architecture
requires guided, unidirectional flows

Conversational legibilityIs this understandable to a listener
rather than a reader?

Content discoverability
Is this content reachable for listeners
using interaction flows, not links?

Voice interface usability
requires solely aural approaches

DemoShopping with chatbots

Shopping with chatbots

Demo
Cooking with Alexa and Drupal

Cooking with Alexa and Drupal

DemoVoice-enabled search withNestlé Purina

Voice-enabled search with Nestlé Purina

3

From a page-driven to ageospatial mentality

Our page-driven mentality
is no longer relevantLinkLinkLink

Much of the web remains page-drivenLinkTitle
Lorem ipsum dolor sit a|

Body
Consectetur adipiscing elit
lorem ipsum dolor sit amet.

Lorem ipsum
dolor sit a|Consectetur adipiscing
elit lorem ipsum dolor sitamet.
Read more

As a result, our ideas of content are page-driven

Our blazers are exquisite|
Men's dress shirts on sale|

Ties 50% off|

But we need to move to a geospatial mentality

Proximity marketingis gaining traction in IoTContent needs to begeospatial, physical, situationalAs a result, content isdecontextualizedBeacons are here to stay●According to a report by ABI Research in 2015,shipments of BLE beacons will break 400 million
by 2020.

●Target, Walmart, and Macy's (big-box store
chains in the U.S.) have introduced beacon
technology to their sales floors.

●Marriott has placed beacons at 14 hotel locations
to send promotional messages about hotel spas,bars, and restaurants.

Where are beacons found?
●Airports●

Big-box stores (sales notifications)●Hotels (seamless mobile check-in)●Museums●Restaurants

DemoBeacons and Drupal at the airport

Secure area

All gates

Unsecured area

Departures level
Security checkpoint

Check-in and ticketing

Customs

Arrivals level
Arrivals hall & baggage claim

Drupal International Airport
THE BEST AIRPORT IN THE CLOUD

What's going on?

Secure area
Post-security
Unsecured area

Departures level
Security checkpoint
Beacon location
Airport entry

Arrivals level

Airport entry beacon welcomes user to the airport
Post-security beacon notifies user gate and boarding time
Exit to arrivals beacon notifies user baggage carousel

What's going on?

Exit to arrivals

Drupal International Airport
THE BEST AIRPORT IN THE CLOUD

Secure area
Post-security

Goes to gate

Unsecured area

Departures level
Security checkpoint

Checks in

Beacon location
Airport entry
Ted's route

Arrivals level

Exit to arrivals
Heads to baggage claim

Drupal International Airport
THE BEST AIRPORT IN THE CLOUD

What's going on?

Beacons and Drupal at the airport

4

Augmented andvirtual reality

Skin & Bones exhibit
from the Smithsonian
National Museum of
Natural History

Augmented reality is here to stay
●Forrester in 2016: "Companies will continue toexperiment with AR and VR, setting the foundation
for larger implementations in 2018 and 2019."●

Augmented reality was the subject of a U.S.
Senate Committee on Commerce, Science, andTransportation hearing in November 2016.

Situational content●

Rather than simply showing additional
information as an overlay when the user finds theright place to point their smartphone (an activeor explicit interaction) ...

●… it makes more sense to use beacons to have apassive or implicit interaction with what's in view
directly to the user — and facilitate richer
bidirectional interaction (and gathering of data).

Link

Link

Link

We can no longer think of content as pages

LinkSituational change

Situational change

Link

Situational change

We can think of them as experiential overlays

Toni's Freilandeier$2.49

Most recent review by criz: 5 out of 5
These are great!

Manner Wafer Cookies$1.99

Most recent review by dasjo: 5 out of 5Delicious!

Content undergoes decontextualization in augmented reality

Manner WaferCookies
Price: 1.99
Toni'sFreilandeierPrice: 2.49
criz's review:
5 out of 5 stars
These are great!

Content undergoes decontextualization in AR

dasjo's review:
5 out of 5 stars
Delicious!

DemoShopping with augmented reality

JSON API
API responseAPI call

Manner Wafer
Cookies
Price: 1.99
dasjo's review:
5 out of 5 stars
Delicious!

What's going on?

Shopping with augmented reality

Demo
Virtual reality on campus

Virtual reality on campus

5Smart infrastructureand digital signage

DemoFreshman year on a smartcampus

Freshman year on a smart campus

6Epilogue
The future of Drupal

These new experiences will define
the future of Drupal

Manageadmin

Edit

Create a conversational interaction flowYour content

Build an interaction flow to delineate which content is available to your Android and iOS chatbot,
your web-driven chatbot, and your Alexa and Google Home voice assistants.

FAQ

Insert bot response

WhereI purchase
Search can
all contentof this type
Returnexactmatch
Pocari Sweat?

BOT:

Feel free to ask meanything.|PRODUCTPocari Sweat
INTENT:EDIT VARIATIONSINTENT:EDIT VARIATIONS

I'm looking for help
finding a product.

I need an answer to myquestion.

STORE LOCATION

BOT:

BOT:

PROMOTION+ Add action
Insert response to intent

Sure!
ACTION: Search for

PRODUCT+ Add action

ACTION: Search for

Shinagawa

10% off all sports drinks

FAQ+ Add action Editing conversational content

Manageadmin

Edit

Create an augmented reality overlayYour content

Use this interface to determine which content to deliver to an augmented reality overlay. Theappearance of the overlay will be determined by the application providing augmented reality.
Provide a target and content to return.

TARGET IMAGE

Where can I purchase
Pocari Sweat?

RETURNED CONTENTPRODUCT+ Add image

FAQ+ Add content

Use Teaser mode
PRODUCT
Use Full mode
Pocari Sweat
Add all fields

TITLE
Pocari Sweat
STORE LOCATION

Shinagawa
DESCRIPTIONALTERNATE NAME
The
best sports drink in the
Pocarientire world, with a mild
grapefruit flavor.
DESCRIPTION
The best sports drink in the
ALTERNATE
NAME
entire world, witha mild
Pocarigrapefruit flavor.

PROMOTION

10% off all sports drinks

Editing augmented reality content

Manageadmin

Edit

Create locational content

Your content

Insert a location and provide a push notification for each beacon by providing the beacon'sunique identifier. Drupal will automatically provide a URL for the delivery of a push notification tothe device.

LOCATIONSTORE LOCATION+ Add location
Shinagawa

FAQ

Where can I purchase
Pocari Sweat?

PUSH NOTIFICATIONSBEACON ID
48c59773-0b51-461e-93e6-36ae93f4d788

CONTENT TO PUSH
PROMOTION+ Add content

PRODUCT

Pocari Sweat
STORE LOCATION

Shinagawa

10% off all sports drinks
PROMOTION

10% off all sports drinks

Editing situational content

A multifaceted Drupal isa more future-proof Drupal

Thanks to you, Drupal's story
has only just begun

Thank you!
Preston So is an innovation lead, researcher, speaker, and author of
Decoupled Drupal in Practice (Apress, 2018).
A globally recognized voice on decoupled Drupal and subject matter
expert in the decentralized web and conversational design, Preston is
Director of Research and Innovation at Acquia, where he helms
Acquia Labs, an innovation center architecting projects for clients likethe State of Georgia and Nestlé Purina.
Having spoken twice at SXSW Interactive, Preston is a sought-after
presenter with keynotes on four continents and in three languages.
preston.so@acquia.com • @prestonso • #futuredrupalありがとうございました！
プレストン・ソーはイノベーションリーダー、研究者、スピーカー、そして「Decoupled Drupal in Practice (Apress 2018年)」の著者です。
Decoupled Drupalの世界的なリーダーであり、 Decentralized Webや会話形デザインの専門家でもあります。プレストンは、 Acquia Inc.（アクイア社）でリサーチ・アンド・イノベーションディレクターを務めており、イノベーションセンターであるアクイアラボを率い、ネスレやジョージア州政府などのプロジェクトにて次世代のアーキテクチャの開発に貢献しています。
過去2回にわたり、SXSWインタラクティブで講演し、大陸にて 3つの言語で基調講演をおこなう人気スピーカーでもあります。
preston.so@acquia.com • @prestonso • #futuredrupal

Decoupled Drupal in PracticePre-order now:
tiny.cc/decoupled-in-practiceIn the first and only comprehensive guide to
decoupled Drupal across the stack, with a foreword
by Drupal project lead Dries Buytaert, learn
everything you need to know about decoupled
Drupal—from building the back end and designing
APIs to integrating with front-end technologies.

79