2016年5月14日（土）に開催された関西フロントエンドUGの「[HTML/JS/CSS] WebデザインとUX について考える」に参加してきた。
普段はクライアント側である私だが、製作者的な視点を知ってみたい気持ちから参加した。
クライアント側に技術への理解があることで、スムーズなコミュニケーションが取れるようになることを期待している。
この日の会場であったサイボウズ大阪支社は綺麗で居心地の良い空間であった。
発表題目
- UI/UXとPELSONA
- イラスト制作とデザインに共通する表現技法
- 初期導入と記憶の利用☆
- UI記述言語としてのHTML
- UXを損ねる静的コンテンツ配信アンチパターン☆
- 正解のないデザインについて、それでも正解について考えてみる☆
- 制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例-
- 人類の進化とデザイン
- WebアプリケーションとWebサイトのデザインの違いからみるCSS設計
本記事では、その中でも私が特に興味を持った、上記☆マーク発表について紹介する。
初期導入と記憶の利用
plum_shiga
ユーザが新規にシステムやサービスを利用する際、その初期学習コストを採用基準として利用することが少なくない。特に自身にとって覚える手間が少ないか、また既存の経験や知識を応用することで利用に耐えうるかという判断を行うことがある。
本稿では、ユーザの初期学習コストを軽減し、新規システムやサービスの導入負担を検討するための一側面として、人間の記憶特性について概説する。
研究職として勤務されている@plum_shigaさんによる発表。
実際の研究データを交える、まさに”参加しなければ得れない情報”だった。
記憶というのはどう強化されるのか。
「意味的処理を加える」ことである。
発表で出されていた例をあげよう。
以下の文章をどう覚えるだろうか。
ONSY BMI AJL
私は10文字の暗唱に試みたが、難しい。
人の短期記憶は7文字程度が限界値であり、10文字を短期的に覚えるのはかなり困難であるとのこと。
だが、これが以下だとどうだろう。
SONY IBM JAL
企業名として、3種類を覚えることで解決する。
非常に容易な記憶方法になるのだ。
もう１つ、意味的な記憶の質も影響を与える。
- 太った男が、標識を見ている。
- 太った男が、標識を見ている。標識の高さは6メートルだ。
- 太った男が、標識を見ている。標識には、この左記の氷が薄い、と書いてある。
- 太った男が、標識を見ている。［好きな文章］
この4パターンそれぞれで記憶させ、その後に標識を見ていた人物の特徴を聞く。
どのパターンで記憶したグループの正答率が良いだろうか。
３である。
太っていることは、氷が薄い場所を歩くリスクになり得る。
そうした関連情報があるとき、人はその情報を記憶するのだ。
上記2つの例にある通り、記憶方法の質は、記憶の定着に大きな影響を与える。
webサービスにおいては、導入期に利用方法をどう説明するかが課題となる。
その際にこういった概念の理解が、適切なチュートリアル設定などの手助けになるはずだ。
webに限らず、私の業務である広報という視点から見ても、「覚えてもらう方法」を考えるヒントになった。
今回の発表があった中で最長時間だったが、時間を一瞬に感じる上質な発表だった。
深い知識を持った上で、初心者にわかりやすく伝える工夫があった好例であるように思う。
参考：
「系列位置効果」（初頭・新近）「残存効果」／心理実験・心理効果
「記憶」の仕組みを知って効率よく学習したい…その３、短期記憶の特徴と容量について – 烏は歌う
UXを損ねる静的コンテンツ配信アンチパターン
サイボウズ株式会社 大阪開発部 Webアプリケーションエンジニア 岡田勇樹
画像やCSS、JavaScriptなどの静的コンテンツ配信において、ブラウザキャッシュやHTMLタグの使い方を正しく理解していないと、予期せずUXを損ねてしまう場合があります。 開発中は何の違和感もなかったのに、リリース後に開発者の知らないところでそういった問題が発生することもしばしばあります。 本セッションでは、そういった問題を未然に防げるようにいくつかのアンチパターンをご紹介します。
開発環境ではきづけない、UIを損ねるパターンについて。
- asinc defer
- javascriptをまとめる方法
ユーザーにとっては、javascript読み込みのせいでページが表示されない状態だと不安を感じる。
数秒の違いかもしれないが、快適さは全く異なるのだろう。
参考：
JavaScriptの読み込み高速化方法についてまとめてみた | デジタル料理人
正解のないデザインについて、それでも正解について考えてみる
カイト
CoderDojo西宮 / 梅田 – ボランティアによる若者の為の無料のプログラミング道場
マークアップやプログラミングと違い、デザインには正解がないとよく言われます。ただ、それでは思考を放棄してしまうことになりますので、商業デザイナーである以上は、やはり正解について考える必要があります。
このセッションでは、最終的な答えを教えるわけではなく、ある種の問題提起であり、みなさまに自分なりの正解を考えてもらうきっかけにできればと思います。
デザインに正解は本当にないのか？
定説に立ち向かった発表。
デザインの好みはあれど、UI/UXから考えると、クリアすべき部分がある。
webデザインにおける基礎的な部分を網羅したPixel Perfect Precisionがオススメされていたので紹介したい。
- コンテンツの幅は最大でも960px程度
- 警告は黄色のような、連想させる色を守る
また、Pixel Perfect Precisionをもとに基礎的な部分をクリアした上で、最後は感覚的、好みによる部分もある。
その際に「理由として語れるもの」をどこまで持てているかを意識しよう。
なんとなくではなく、デザインの意図を伝える。
クライアントワークでは、納得させないと前には進めないのだから。
他にも興味深い発表ばかりであったのだが、全てを触れることができない点をご容赦願いたい。
関西にお住まいの方で、フロントエンド周りに興味がある方は、ぜひ参加してみてほしい。
