Webの入力フォームデザイン入門

2013-08-30関西エンジニア＆クリエイターのためのHTML５勉強会

川田 寛Hiroshi KAWADA

講演者プロフィール

Web技術者コミュニティ

html5jえん

ぷら部 部長

某SIのWeb系エンジニア

九州生れ 関西育

ち 関東在住

slideshare.net/kawada_hiroshi

@kawada_hiroshi1

入力フォームは奥が深い

自信を持って答えることができますか？

Question 1項目のグルーピング

Q1. 最もユーザストレスの低い　 入力項目のグルーピングは？

1. Text length(入力文字数)

◯✕△

◯✕△

◯✕△

◯✕△

◯✕△

◯✕△

Q1. 最もユーザストレスの低い　 入力項目のグルーピングは？

2. Required/Optional(必須/任意)

◯✕△

◯✕△

◯✕△

◯✕△

◯✕△

◯✕△

***

Q1. 最もユーザストレスの低い　 入力項目のグルーピングは？

3. Control’s Type(入力形式)

◯✕△

◯✕△

◯✕△

◯✕△

◯✕△

◯✕△

✓✓✓

Question 2入力項目のラベル

Q2. 最もユーザストレスの低い　 ラベルの配置は？

1. Left-aligned Labels(左寄せ)

name :

Q2. 最もユーザストレスの低い　 ラベルの配置は？

2. Right-aligned Labels(右寄せ)

name :

Q2. 最もユーザストレスの低い　 ラベルの配置は？

3. Top-aligned Labels(上寄せ)

name :

Q2. 最もユーザストレスの低い　 ラベルの配置は？

4. Bottom-aligned Labels(下寄せ)

name

Q2. 最もユーザストレスの低い　 ラベルの配置は？

5. Inline Form Labels(フォーム内)

name

どれが最善かを決める工学があります

ユーザビリティUI/UX ←よくわからないです

１章

Think-aloud Protocols

Eye Tracking

ユーザビリティデザインの”ツール”

Remote Usability Testing

Focus Groups

Interviews

Cognitive Walkthrough

Pluralistic Walkthrough

Think-aloud Protocols

・とても派生が多い・心理学、社会学的・最近有名なUX実現の一種

シンクアラウド プロトコル

一連の作業をどう終わらせるか

デザイナ 開発者 ユーザ

Eye Tracking・UIの改善・人間工学的・ガイドラインがある

アイ トラッキング

http://en.wikipedia.org/wiki/Eye_tracking

注視点を計測

Metteo Penzo氏のEye Tracking検証結果にラベルの最適な位置が提案される

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Single Path = 注視点を一本の線で結べるように

氏名

ふりがな

年齢

✕Left-aligned Labels

Single Path = 注視点を一本の線で結べるように

氏名

ふりがな

年齢

◯Right-aligned Labels

Single Path = 注視点を一本の線で結べるように

氏名

ふりがな

年齢

◯◯Top-aligned Labels

グルーピングのデザインの”指針”

Requires First

The Magic Number 7

Pareto Principles

Serial Position Effects

Requires First必須が最初のルール・必須の入力項目を極力最初に配置する。

必須系

任意系

名前ふりがな

ログインID

・・・

メルマガ

***

Pareto Principles２：８の法則・選択は利用頻度の高い２割に最適化する。

01. りんご02. みかん03. メロン04. スイカ05. 洋梨

▼

03. メロン

01. りんご02. みかん03. メロン04. スイカ05. 洋梨

候補

一覧

Serial Position Effects初頭効果・終末効果・親近効果

・大量の項目の選択で見られる心理学的特徴→ “最初の項目”ほど印象が強い。→ “最後の項目”ほど印象が強い。→ “有名な言葉の項目”ほど印象が強い。

・大量の項目にはグルーピングが必要

The Magic Number 7マジックナンバー ７±２・選択項目は最大９つになるよう設計。

◯✕△◯✕△◯✕△◯✕△

◯✕△◯✕△ ◯✕△

◯✕△◯✕△◯✕△◯✕△◯✕△

分類A

分類B

◯✕△◯✕△◯✕△◯✕△◯✕△◯✕△

入力項目のグループの扱い方1. フィールドセット化

http://modernizr.com/download/

入力項目のグループの扱い方2. タブグループ化

https://www.facebook.com/settings

入力項目のグループの扱い方3. ページ分割化

https://www.amazon.co.jp/

Webの入力フォームはデザインにコツが要ります

マルチな環境Webの思想を理解しましょう

テキスト長問題

コントロール形状問題

イベント実行順問題

レガシーIE問題

テキスト長問題Ex. スタイルを「width:220px;」で固定すると

220px

MacOS Chrome

WindowsXP IE8

環境によって後ろが切れる

コントロール形状問題Ex. サブミットボタンをそのまま使うと

環境によってデザインが違う

- Webのデザインのコツ -

どんなデザインも“余裕”を持たせましょう

イベント実行順問題Ex. チェックボックスのラベルをクリック

環境によってイベント実行順序が違う

IE

Firefox

Chrome clickfocus → clickclick → focus

レガシーIE問題国内に占めるレガシーIEはまだ多い

http://gs.statcounter.com/#browser-JP-monthly-201207-201307

作り込みすぎると必ず問題が起こります。対処できるならOKですが

新しいWeb技術HTML５だけに拘らない

２章

新しいWeb技術HTML５から変わった入力フォーム

・フォーム全体の概念が再整理される予定

・IE固有技術がWeb標準技術に昇格する予定

※現在”勧告候補”なので、”予定”としました

・新しいコントロールが追加される予定

・既存のものは、拡張がされる予定

Web標準技術入力フォームの特徴

IE４から動作するものがある

他のHTML５追加機能より実装が速い

HTML４ → HTML５

ドキュメントボリュームが増えた

4,800行http://www.w3.org/TR/html5/forms.html#forms

1,081行http://www.w3.org/TR/REC-html40/interact/forms.html

Form Controlの種類が増えた

input要素(type=”text”)

input要素(type=”tel”) : 公式非対応

input要素(type=”url”) : 公式非対応

input要素(type=”email”) : 公式非対応

input要素(type=”password”)

テキストボックス・ベース

Form Controlの種類が増えた

ボタン・ベースbutton要素

input要素(type=”reset”)

input要素(type=”submit”)

input要素(type=”file”)

input要素(type=”image”)

Form Controlの種類が増えたForm Controlの種類が増えた

セレクトボックス・ベースinput要素(type=”date”)input要素(type=”week”)input要素(type=”number”)

input要素(type=”month”)input要素(type=”time”)input要素(type=”datetime-local”)

keygen要素

select要素input要素(type=”datetime”)

Form Controlの種類が増えたForm Controlの種類が増えた

ブーリアン・ベース

input要素(type=”checkbox”)

input要素(type=”radio”)

Form Controlの種類が増えたForm Controlの種類が増えた

特殊系input要素(type=”color”)

meter要素

progress要素10+

input要素(type=”range”)10+

Mac版ChromeWin8版IE10

validationがサポートされる

validationでフォームが便利に

<label>要素が地味に機能強化

<label for=”ID” form=”formID”> Something Phrasing Content...</label>

他のフォームへアクセスできる

小ネタですが…

最近見なくなった<fieldset>が…

<fieldset> <legend>タイトル</legend>

<label><input ・・・ </label>

<label><input ・・・ </label>

</fieldset>

ドラフト化はまだまだですが…

DIV要素などのラッピングなどが可能になるかもしれない

タイトル項目１

項目２

項目３

小ネタですが…

IE独自機能のWeb標準昇格？

CSS３-UI(ime-mode)IME制御ができるCSSプロパティ

: ◯

: ◯: ✕

http://www.w3.org/TR/css3-ui/

Forms以外の技術で入力フォームの強化

WebStorageによる入力のバックアップ

WebStorageによる入力バックアップ

閉じて開く

JavaScriptによる不足機能の支援

Polyfill(ポリフィル) / shim(シム)

jQueryプラグイン

HTML５の新標準機能が動かない場合に動作をエミュレート

jQueryに追加機能を与えるもの

jQueryでの入力フォーム強化jQuery-UI

http://jqueryui.com/

Thank You !!

Call to Action

・入力フォームデザインには工学アプローチを

・入力フォームこそ細かいデザインに拘らない

・相互運用性を高めるためにWeb標準を

・jQueryライブラリはデファクト標準な作りで