ウェブを構成するUIの品質とHTML

@Frontend Conference 2017

Soichi Masuda

自己紹介

ますぴーとかかれたバッジの写真

FRESH!

生放送がログイン不要・高画質で見放題のプラットフォーム

[PR]FRESH!では配信主を募集しています。

👉 チャンネル開設のご案内

ここから本題

ウェブサイト/アプリのUIの品質を高めたい

せやねん1

ウェブサイト/アプリのUIの品質ってなに?

分けて考えてみましょう

ウェブサイト/アプリのUI

画面のすべてがUI

  • リンク
  • 画像やテキストラベル
  • ページ全体

すべてがユーザーとの接点

ウェブのUIって

どうやってやってるの1

UIができるまでの簡易フロー

  1. サーバーがHTML(CSS,JS)を配信
  2. ブラウザがHTMLを受け取りDOM(Document Object Model)を構築
  3. CSSと組み合わせてレンダリング処理
  4. (必要なら)JSがEventや振る舞いを追加

ウェブのUIはHTMLを基にして作られている

最近はJSから直接DOMを構築することも多いですが

UIの品質ってなんだ

品質ってなんだ

提供される製品やサービスについて、買い手側である顧客(消費者)が求める特性との合致度

via https://ja.wikipedia.org/wiki/品質

提供される製品やサービスについて、買い手側である顧客(消費者)が求める特性との合致度

ウェブのUIにおける、ユーザーの体験

ウェブのユーザーって

古いPCが一つ、ありディスプレイの中に This is not web の映されている
This is the web. PCだけでなく、携帯電話、スマートフォン、タブレットなどの端末が並びそれぞれのディスプレイに「Web」の文字が映されている
This will be the web. PC、スマートフォンだけでなく、車や時計、プリンタ、ゲーム機、冷蔵庫にディスプレイがあり「Web」の文字が映されている。またさらにそのまわりを「?」が囲んでいる

もうココ?

via This is the Web by Brad Frost

加えて多様な人々、様々な利用環境

ウェブのUIの品質とは

多種多様なユーザー(や端末)が様々な環境で UIを使用した際の体験の総量ではないか

UXの総量

ナニコレ 1

特定のユーザーのみがUIを使用した時のUXは

UX = y

縦軸にUXと記載されたあるユーザーのみの棒グラフ

この場合は値 = 品質

多種多様なユーザー、又はデバイスがUIを使用した時のUXは二変量に分布

ターゲットであるペルソナが得られるUXを頂点とした場合、他ユーザーが得られるUXはペルソナとの近似度に従って下がる

x
ペルソナとの乖離度合
y
それぞれのユーザーの体験

この場合は先の内側の面積 = 品質

多種多様なユーザーが様々なデバイスや様々なコンテキストでUIに触れた時のUXは

多変量に分布する

多次元空間の大きさ = 品質

頂点は複数、また時間とともに移りゆく可能性も

ここまでのまとめ

ウェブのUIの品質
多種多様なユーザー(や端末)が様々な環境で UIを使用した際の体験の総量

ではないか(私見)

HTMLのお話

HTMLは品質のどこに寄与するか

基礎的品質 / ロングテール的品質

正規分布に近い二次元グラフの図で、x軸の端でも値は0になっておらず底上げされており、底上げ箇所が赤枠で囲まれている。
ここの底上げに寄与する

HTMLがUIの基礎的品質を担う

CSSはよりコンテキストに沿ったものを担保しJavaScriptは機能的品質を担う。

フォームなどは直接HTMLが機能的品質を担う

基礎的品質

まず使えるということ

Evaluation techniques shown as a pyramid / ユーザーエクスペリエンスのロードマップとして下から Usable, Useful, Desirable, Delightfulの4層のピラミッドの図

via User Experience Maturity Pyramid by UXPA

品質を高めるHTMLの書き方(DOM構築の方法)

HTMLをなるべくHackしない

  • 適切な要素選択
  • 適切な要素順
  • 適切な属性値の記述
適切な要素選択

ex : button

<button type="button">Button</button>
Button
<div class="button">
<span class="sr-only">Button</span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<button>を再現するためには
  • tabindex属性によるフォーカスの受け取り
  • :focusのスタイル実装
  • role="button"によるセマンティクスの補強
  • onKeyPress(Space, Enter)などのキーボードEventトリガーの実装
  • disabled属性による操作不可の実装

すべてを実装しないとそれぞれのユースケースで品質が下がる

<button>使おう

せやろ1

適切な要素順

ex : モーダルウインドウ

bodyの末尾にモーダルつけちゃう
const button = document.querySelector('button');
const modal  = document.createElement('div');

modal.innerHTML = '<p><a href="#">Link in Modal</a></p>';

button.addEventListener('click', () =< {
  document.body.appendChild(modal);
});

See the Pen mWqgZz by Soichi Masuda (@masuP9) on CodePen.

button押した時にフォーカスをモーダルに移して上げる必要がある。

でもDOMの順序に気をつければ…

See the Pen jBaobb by Soichi Masuda (@masuP9) on CodePen.

DOMの順番を自然な流れで構築しよう

適切な属性値の記述

ex : img要素のalt属性

素直に書けない場合

現在のHTML仕様では機能不足なこともある

WAI-ARIA

マークアップ言語に不足しているセマンティクスを提供する

詳しくは昨年の発表を

Extended HTML WAI-ARIAとMicrodataでHTMLを拡張する

大事なのは、HTMLに足りないものを補うこと

より高い品質を目指して

SPA(Single Page Application)のページ遷移

CLIENT SIDE OF █████FRESH.TV 2016.04.05 - Node学園 20時限目 @ahomu

覚悟が必要

SPAとはブラウザを超える体験を再実装する覚悟である

via SPAと覚悟 by Teppei Sato

品質を保つための考え方

HTMLをなるべくHackしない

Hackするときは覚悟を持って💪

ありがとうございました

最初に戻る🏠