Reproではテクニカルなサポートにintercomを利用している。 最近UIもrenewalされたが、まだ痒いところに手が届いていない状況であることは否めない。 そういうところを直すために、 refine-intercom というextentionを作った。 Automatically ellipsis email history チケット管理の観点からも、なるべく社内外からの問い合わせ回答する場所をintercomに一本化しており、その問い合わせ経路の一つにemailがある。 このとき、emailでやり取りしていたお客様から、テクニカルな質問があるときは途中からtechnical supportにバトンタッチされる。 これはとても良いことなのだが、大きな問題はemailの履歴である。 この履歴がintercomの会話パネルを全て埋め尽くす。いくらスクロールしても終わらない状態。とはいえ、読みたいときもゼロではない。 こういう状態が続いていたわけです。 このような問題を解決するために、emailの履歴とみられる情報をconversation上に見つけたらdetail tagで括って、必要となるまで非表示にしてしまうようにしました。 ここらへんはintercomさんでうまくやってくれるとユーザービリティ高いのになぁ Expand conversation window チャットツールをディスプレイ縦置きした状態で見る人は少なからずいるはずで、例に漏れず私もその一員である。 このとき問題なのが、full HDサイズのディスプレイを縦置きすると横幅が1080になる。 コードを書くときはこれで問題ないのだが、チャットする上では、こう会話ペインがぎゅっと小さくなるわけだ。 そうしたときに、常に見たいわけではない情報を隠したい。 このために右ペインのペルソナ情報を隠すボタンを作った。 今思うとキーボードショートカットを割り当てたほうが良かった気もしている。 Essential tag validator 単純に問い合わせを受けて処理するだけなら問題ないのだが、問い合わせの機能や種別、処理時間を分析したいニーズは往々にあると思う。 そういうニーズに対してintercomは正直まだまだ行けてなくて辛い。 なので、会話にタグ (e.g. feature-push など ) を付けてzendeskやgoogle spreadsheetに記録して分析している。 そういうときに問題と成るのが、分析軸となる担当者のtagのつけ忘れである。 この問題に対応するために、必要なtagのprefixをchromeのstorageに記録しておき、最初のconversationのタグ情報をチェックするようにした。 こうすることで、タグつけ忘れが見える化され、問題が解決されることを祈る。 あっタグ情報はstorageに記録以外にも、gistなりs3なりにおいたファイルをパースして取得するようにしておけば、各位の設定漏れもなくなるから良いのかなぁ

最近気になる違い スマフォやタブレットのタッチパネルにhoverが無いのはユーザーフレンドリーではないと思っている。 そうするとUIは 例えば、スマートフォン上で、よりボタンをボタンらしくしたりとか、視覚だけで動作を求められるようになる。 そうする事で、「注意」を引きつけようとする。 簡単に言うと浮き出たように見える視覚的な錯覚や近接感。 でも、やっぱり強く人間の注意を引きつけるのは明度の変化だとすると、錯覚だけでは十分ではないよね？って感じてる。 むしろフラットでも良いので、明度の変化を与えて欲しい。 つまりスマフォやタブレットって hoverが使えない事によって、デザイン的に見てもユーザーに意味を伝えるのが困難になる。 もちろん、「どうやって意味を伝えるか？」が面白いんだろうけど、ユーザーにとって意味を理解できるようなデザインには、本職のデザイナーさんがやらない限りそうそうないだろう。つまり、ユーザーフレンドリーではない。 逆にマウスは ユーザーへ“カーソルの移動”という不便さを与える事で、一つユーザーに意味を与えるためのナビゲーションを追加する事が出来る。 スマートフォンにも、一つ、そういう動作を提供する事は出来ないだろうか？ 不便にする事で、意味の理解をナビゲートするUIとデバイスの関係を、次のプロダクトでは考えて実現しよう。

細かいUIを詰める上で意識しておきたい事まとめ集  Layout Rule Index レイアウトデザイン、新・100の法則 [単行本] ちょっとした工夫で大違い！Webサイトのユーザビリティtips ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン