uxの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える：【mt東京−42】カスタムフィールド製造業の集い...

UXの視点からカスタムフィールドを増やすとなぜ息苦しくなるのか考える

1

HCD-Net認定⼈間中⼼設計専⾨家⽻⼭祥樹

2017年12⽉16⽇（⼟）【MT東京42】カスタムフィールド製造業の集い

〜カスタムフィールド職⼈に⼤切なこと〜

2

ウェブは拡⼤する⼀⽅。

各社とも、ウェブサイトに⼒を⼊れ続け、その規模は⼤きくなり続けている。

道⽞坂⼤学ニュースリリース

ニュース記事学科・コース学⽣⽣活⼊試情報就職情報⼤学院

3

例：あるウェブサイト：

ページ数

カスタムフィールド数

20,000 ページ

200 フィールド

新規記事の登録タイトル

サブタイトル

公開⽇

meta description

年⽉⽇カレンダー

プレビュー

meta keywords

og:title

og:description

本⽂

⼀覧ページのサムネイル画像

選択...

og:image

選択...

カテゴリ1

関係する商品

▼

カテゴリ2▼

カテゴリ3▼

商品A 商品B 商品C

商品D 商品E

⼀覧ページのテキスト

ふつうにつくるとこうなる →

4

それでも、うまく運⽤するためには、どうすればいい？

⽻⼭祥樹 HAYAMA Yoshiki

v インフォメーションアーキテクト•  使いやすいWebサイトをつくる専⾨家•  HCD-Net認定⼈間中⼼設計専⾨家

v Web業界に20年くらい、Watsonは2年ほど

v 担当したWebサイトが、雑誌のWebユーザビリティランキングで国内トップクラスの評価を受けるほか実積多数

v 主な専⾨分野•  ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、

アクセシビリティ、⼤規模CMS、Watson、ライター

Twi$er：@storywriter　WebSite:storywriter.jp5

ユーザー⼼理をつかむプロです

6

メンタルモデルユーザーへの共感から⽣まれるUXデザイン戦略

Amazonで購⼊：http://www.amazon.co.jp/dp/4621088068

コンピュータ・IT > インターネット・Web開発 > Web開発最⾼「1位」コンピュータ・IT 総合最⾼「9位」

7

今⽇の主旨：カスタムフィールドを増やしたときオペレーターにとって何が起きているのか

UXデザインの視点「認知⼼理学」から考える。

8

本⽇のポイント：CMS案件の特徴

「⾒えるもの」と「仕上がるもの」が異なるCMS案件には「ウェブページと管理画⾯で⾒えているものが異なる」という難しさがある。

9

CMS案件は、何が難しいのか：

CMS案件は、表側のウェブページだけでなく、「管理画⾯のどこで何すると、どう反映されるのか」「何はできて、何はできないのか」という、裏側がある。

10

CMSの難しさ＝マンマシン・インタフェース：

「管理画⾯で⾒えるものと、ウェブページが異なる」のが、⼈間の認知には、根本的に難しい。

認知しやすい認知しづらい

直接に触れる／⾒たまま何かを介する／⾒たのと異なる

11

CMSは、さらに認知⼿続きが複雑：

管理画⾯で⼊⼒したものが、複数の箇所や⾒えない箇所にも反映される。全体構造を知らないといけない。

認知しづらいとても認知しづらい

何かを介する／⾒たのと異なる⼊⼒がどこに反映するのかわからない?????

12

これはまだわかりやすい：

ニュース記事




サブタイトル

公開⽇年⽉⽇カレンダー

プレビュー

本⽂

ドラフトを保存送信して公開下書きの破棄

13

ページ構造が複雑になった：

ニュース記事




サブタイトル


プレビュー

本⽂

画像

選択...


14

ページ構造が複雑になった：

ニュース記事




サブタイトル


プレビュー

本⽂

画像

選択...


⼊⼒と出⼒の対応が分割された。

「本⽂」と「画像」って別なの？

あ、そう・・・

15

サイトの他の箇所に表⽰される：

ニュースリリース一覧

（年別に全件表示）

ニュース記事

ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

本⽂


選択...


画像

選択...


16

サイトの他の箇所に表⽰される：



ニュース記事

ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

本⽂


選択...


画像

選択...


ふつうに⾒える範囲の外も更新されるようになった。⼊⼒と出⼒が 1：n の関係になった。

他のページにも出るの？どこに影響するのかわからない・・・

17

カテゴリにより出たり出なかったりする要素：

呍呍呍

学長あいさつ

交通アクセス

施設案内



ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

本⽂


選択...

カテゴリ▼


画像

選択...


18

カテゴリにより出たり出なかったりする要素：

呍呍呍

学長あいさつ

交通アクセス

施設案内



ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

本⽂


選択...

カテゴリ▼


画像

選択...


どんなカテゴリがあるのか、どの要素がカテゴリに影響されるのか、サイト全体の構造理解が必要になった。

このカテゴリを選ぶとどのページのどこに反映されるわけ？

19

⾃社サイトの外に表⽰される：

呍呍呍

学長あいさつ

交通アクセス

施設案内



ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ▼


画像

選択...


20

⾃社サイトの外に表⽰される：

呍呍呍

学長あいさつ

交通アクセス

施設案内



ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ▼


画像

選択...


⾃社サイトで⾒えている範囲だけでなく、ウェブ全体のエコシステムの理解がいるようになった。

og:imageって何・・・？

21

他社サービスと連携する：

呍呍呍

学長あいさつ

交通アクセス

施設案内



ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ▼


画像

選択...

utmパラメータ


22呍呍呍

学長あいさつ

交通アクセス

施設案内



ニュース記事

ニュース記事

呍呍呍




サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ▼


画像

選択...

utmパラメータ


他社サービスと連携する：

システムという、⽬に⾒えない部分の理解も必要になった。

utmパラメータって何・・・？もうムリ・・・

23

ぜんぶわかってないと管理できない：

ひとつの⼊⼒が、あまりに多くの要素に波及するため、そのすべてを理解しなければ、カスタムフィールドが飽和した管理画⾯を、正しく操作できない。

⾒えるもの管理画⾯

⾒えるもの

⾒えないもの

意識の範囲内

意識できない

24

視認性：

「⾒づらい」「パッと⾒て⼊⼒しなければならない量が多そうに感じる」という、視覚の負荷の軽減も重要。

25

これはちゃんと⾒える：道⽞坂⼤学

ニュースリリースニュース記事

学科・コース学⽣⽣活⼊試情報就職情報⼤学院


サブタイトル


プレビュー

本⽂





サブタイトル


プレビュー

本⽂





サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ


画像

選択...

utmパラメータ


こうなると、じつはこう⾒える：道⽞坂⼤学




サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ


画像

選択...

utmパラメータ





サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ


画像

選択...

utmパラメータ


こうなると、じつはこう⾒える：道⽞坂⼤学




サブタイトル


プレビュー

og:title

og:description

本⽂


選択...

og:image

選択...

カテゴリ


画像

選択...

utmパラメータ


なんかボヤけた四⾓形の「かたまり」が

並んでる・・・




サブタイトル


プレビュー

og:title

og:description

og:image

選択...

じつはスクロールバーの⻑さも⾒ている：道⽞坂⼤学




サブタイトル


プレビュー

本⽂





サブタイトル


プレビュー

og:title

og:description

og:image

選択...

じつはスクロールバーの⻑さも⾒ている：道⽞坂⼤学




サブタイトル


プレビュー

本⽂

ドラフトを保存送信して公開下書きの破棄スクロールバー短っ！⼊⼒項⽬

めっちゃ多くね！？

30

視認性：

カスタムフィールド量が増えると、どうしても視覚の負荷は増えていく。それは想像以上に、オペレーターに⼼理を圧迫する。

31

どうして息苦しくなるのか：

指数関数的に考えることが増えていくから。あと、⾒づらいことが⼼理負荷になるから。

カスタムフィールドを増やすと、どうして息苦しくなるのか。

32

それでは困る。

33

オペレーターの負荷を下げるには：

「管理画⾯の⻤カスタマイズ」をオススメしています。

カスタムフィールド200個は、そうしないと使えない。

34

「管理画⾯の⻤カスタマイズ」のコツ：

管理画⾯に、説明をきちんと⼊れる。⾔葉にこだわる。

og:title

og:description

og:image

選択...

Facebookに表⽰されるタイトル

Facebookに表⽰される説明⽂

Facebookに表⽰される画像

選択...

Facebookには専⽤のタイトルや画像を設定します。

35


管理画⾯で、⼊⼒のバリデーションチェックをし、わかりやすいエラーメッセージをきちんと出す。

タイトル

サブタイトル思いが詰まりに詰まってとにかく長いタイトルをつけてし

タイトル

サブタイトル

タイトルは32文字以内にしましょう。Googleで表示される上限です。

36


オペレーターを、タスクごとに複数のグループに分けて、それぞれに専⽤の管理画⾯をつくる。⾃分に関係あるところだけ⾒えるようにする。

タイトル

本⽂

画像

選択...

ニュースリリース⽤

タイトル

本⽂

商品情報⽤

関係する商品商品A 商品B 商品C 商品D 商品E

広報部マーケティング部

37

覚悟すべきこと：

•  バージョンアップで苦労するのは、もう覚悟するしかない。カスタムフィールドを増やすということは、そういうことだ。

•  PowerCMS が Movable Type の管理画⾯を改修したのは英断だったと思う。

38

まとめ：

1.  CMSは、「⾒えるもの」と「仕上がるもの」が異なるのが、難しい要因のひとつ。

2.  管理画⾯をカスタマイズするとよい。管理画⾯に説明をきちんと⼊れる。わかりやすいエラーをきちんと出す。オペレーターごとに画⾯を⽤意する。

39

メンタルモデルユーザーへの共感から⽣まれるUXデザイン戦略

Amazonで購⼊：http://www.amazon.co.jp/dp/4621088068

コンピュータ・IT > インターネット・Web開発 > Web開発最⾼「1位」コンピュータ・IT 総合最⾼「9位」

40

ありがとうございました⽻⼭祥樹Twitter: @storywriterFacebook: storywriter.jp

Facebook、ぜひ、つながってください！

⽻⼭のプレゼンのアレが、スタンプになりました！

スタンプ名：ハーミィ（CSS編）作者名：⽻⼭祥樹https://store.line.me/stickershop/product/1228201/ja

Web・CSSネタ全40種類

uxの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える：【mt東京−42】カスタムフィールド製造業の集い...

Design