UXの視点から、カスタムフィールドを増やすとなぜ息苦しくなるのか考える:【MT東京−42】カスタムフィールド製造業の集い...
-
Upload
yoshiki-hayama -
Category
Design
-
view
580 -
download
0
Transcript of 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種類