4月に入社してからというもの、デザインの業務には関わっていないのですが、UI/UXの話は興味があるので参加してきました。

今回は結構セッション数が多くて、それぞれ書いていると長くなりそうなので幾つかピックアップして、勉強になったことなんかを書きます。

初期導入と記憶の利用

なんだか講義のような雰囲気が凄かったですが、内容が面白くて勉強になりました。

記憶はどうやっても忘れてしまう。じゃあどうやって記憶させてその保持を長引かせるのかという話。

記憶に残すためには学習コストを下げたり、ユーザーへの提供の形が重要そうです。また、長くは保たないからちょくちょくヒントを投げるようなものもそれはそれで問題だったりして、なかなか難しいなと感じました。

この辺の話はもう少し勉強したい。

UI記述言語としてのHTML

サイト制作で様々なUIを実装することがあるが、その際に頑張って色んな要素で実装しなくても既にある要素で良い感じに組めますよ。

そんな感じのセッションでした。

例えば、アコーディオンやナビゲーションのトグル、ハンバーガーボタンこういったUIを実装する機会はよくあります。

このとき、色んな要素を使って実装するというのもよくあるけど、例えばbutton要素を使えば、ブラウザが良いように解釈してくれて以下の様な恩恵を得られます。

• 押せる見た目に勝手にしてくれる
• キーボードフォーカスを受け取ってくれる
• フォーカス時の見た目もデフォルトで付与
• autofocus属性でフォーカスのコントロールも
• JS無しでEnterやspaceで実行
• 読み上げ時に実行可能であることが読み上げられる

発表資料より抜粋

コレにはハッとしたし、使えるタイミングでは使っていきたいなと思いました。

あと、detail & summaryっていう簡単にドロワーメニューを実装できる要素には度肝を抜かれました。

まだまだ知らない要素がいっぱいアリますね…。

UXを損ねる静的コンテンツ配信アンチパターン

サイト制作を行う上で、こういうことやってるとUX損ねちゃうよねっていうこと7つ

1. デジカメで撮った画像をそのままアップ
2. 画像サイズを指定せずに画像表示
3. Retina 対応してない画像を表示
4. scriptファイルをそのまま公開
5. scriptタグをheadで読み込む
6. キャッシュ有効化しているのに上書き保存
7. なんでもかんでもキャッシュオフ

聞いていてちょくちょくウッ！ってなる内容でした。

scriptの読み込みでasync deferをつけると非同期で読み込めるとかその辺りの話は初めて知りました。

ただ、一概に良いとも言い切れないようなので、今後もbody閉じタグ前設置族を続けそうです。

制作側とユーザーの温度差、そしてペルソナのズレ-プロゲーマーと高校生から学んだ例-

対象のペルソナを元に、こうしたら良いんじゃないかのもとやってみたら見事にコケまくったお話。

高校生を対象にサイトを作って、LINEとTwitterでイベントの告知をした所、サイトからの問い合わせではなく、LINEやTwitterからの質問が多かったそうです。

自分が携わっていた所ではSNS経由での質問は無かったのですが、そういうのも有るんだなと思いました。

また、プロゲーマーの方向けに作ったサイトでは、パンくずが要らなかったり、ホバーで出てきた所にはマウスポインタをもっていけなくても良かったりと便利なものが要らないというパターンはなかなか驚きでした。

(そういえば普段使う時パンくずはあんまり見てないような気も…)

そして、ゲームをプレイしながら見たいからサイトはレスポンシブであって欲しいとか、ゲームしながら見るからあまりごちゃごちゃしなくて見やすいものをという話は、僕もゲームをするので共感でした。

この手の話は他の対象でも色々アリそうですね。

なかなか面白い結果が聞けて良かったです。