freeeの開発情報ポータルサイト

「オブジェクト指向UIデザイン」の輪読会をやっています

こんにちは、freeeのUXチームの id:ymrl です。去年まではエンジニアだった ので、ブログの書き出しで「デザイナーです」って書いていいのか未だにドキドキしています。

以前の記事でデザイニングWebアクセシビリティの輪読会の紹介をしました。

developers.freee.co.jp

最近では「銀の弾丸本」こと「オブジェクト指向UIデザイン——使いやすいソフトウェアの原理」の輪読会をやっているので、その紹介をします。

gihyo.jp

輪読会の様子

「デザイニングWebアクセシビリティ」のときはランチタイムに集っていましたが、リモートワーク継続中の毎週金曜の今は朝10時からGoogle Meetで集まっています。

Google Meet のキャプチャ。時刻は10:12、8人集まっている
Google Meetに集まっている様子(普段はもう少し参加者が多いです)

輪読会の進行としては、毎週十数ページずつの範囲を決めて、気になったところや議論したいところ、あるいは感想を前日までか会の最初の10分ほどでGoogle Docsに書いておいて、のこりの40〜50分で各トピックを議論していくということをしています。

盛り上がったトピック

輪読会は毎回盛り上がっているのでいろいろ紹介したいのですが、あまりに長くなるので自分が印象に残っている議論を2つ紹介します。

おじぎをするATM

ただし、いろいろな業務アプリケーションのUIを設計していると、タスク指向の操作手順である「動詞→名詞」の構文の壁をどうしても打ち破れないことがあります。不自由な操作性であることはわかっていても、モードを作らざるを得ないのです。それはたとえば次のような場合です

(中略)

  • オブジェクトが(ユーザーのメンタルモデルにおいて)意識されていない、あるいはオブジェクトがひとつだけで選択の必要がなく、アクションの引数としての入力がタスクの大部分である場合。たとえばATM。

(後略)

ソシオメディア株式会社, 上野 学,藤井 幸多,「オブジェクト指向UIデザイン——使いやすいソフトウェアの原理」,技術評論社, 2020年, p30

この話をタネに、ATMがなぜタスク指向になってしまうのかには、いろいろな理由があるのでは、という話をしました。

  • ATMで行うタスクでは振込先口座や金額(アクションの引数)を選ぶ操作が多い。そういう手続きが多いからタスクベースなんだろうか。
  • 「サイフの中からキャッシュカードを選ぶ」操作によって、ATMの外で「口座」オブジェクトを選択している。その次のアクションから始まるのでATMの画面にはタスクが並ぶ
  • コンビニのATMではキャッシュカードを入れるところから操作が始まるが、銀行のATMではタスクを選んでから通帳やキャッシュカードを入れている

そんな話をしていくなかで、「ATMのUIは実は銀行によってだいぶ異なる気がする」という話になり、 「おじぎをしてくるATMはタスク指向が強い気がする」「おじぎは人に何かをしてもらうときの表現で、つまりタスク指向のメタファーなのでは」 という珍説で飛び出しました。

ATMのUIは気になるので調べてみたいのですが、いろんな銀行のATMを使う機会が(普段の生活がキャッシュレスだったりステイホームだったりなこともあって)なかなか作れず、まだ検証できていません。

抽象度の高い・低い道具

「オブジェクト指向UIデザイン」の中では「りんご皮むき機」と「果物ナイフ」を例にあげ、前者はりんごの皮をむく機能を手厚くサポートするがそれ以外の用途には使えない抽象度の低い道具、後者はりんごの皮をむく機能へのサポートは弱いが様々なことに使える抽象度の高い道具としています。そして、抽象度の高い道具をモードレスであり良いデザインとしています。

良いデザインとは、ユーザーに合わせたものではなく、ユーザーが自らを合わせられるものなのです。箸やバイオリンや自転車などの優れた道具は、人に合わせたというより、人が自らをどこまでも合わせていけるようにデザインされています。自分が気に入って使っている道具を思い浮かべてください。それはあなたの要求に細かく合わせて作られたのではなく、おそらくあなたの方が、 そのデザインに合わせて要求や行動を変えたのです。

抽象度の高い道具は、それ自体が決まった使い方を強要していないという意味で、モードレスです。同様に、抽象度の低い道具はモーダルです。そしてモードレスな道具は、それを使うユーザー自身の変化によって意味性を高めるという意味で、人と道具の相互発展をポジティプな方向に促すのです。これが、モーダルなタスク指向のデザインではなく、モードレスなオプジェクト指向のデザインを行うことの意義です。

ソシオメディア株式会社, 上野 学,藤井 幸多,「オブジェクト指向UIデザイン——使いやすいソフトウェアの原理」,技術評論社, 2020年, p50-51

抽象度の高い低いについて、自分たちの身のまわりにあるものはどんなものがあるのか、ということも考えてみました。

  • Photoshopのフィルタは抽象度が低く、ブラシは抽象度が高い
  • Photoshop Elements のような入門用ソフトは抽象度が低く、プロ用のPhotoshopは抽象度が高い
  • キッチン用品や食器で抽象度の低い道具=何かのタスクに特化した道具はいろいろと考えられる
    • エッグスタンドという茹で卵を立てるためだけの食器
    • 炊飯器は(いろいろ作れるけど)基本的には米を炊くためだけの道具

特にキッチン用品や食器には抽象度が低いものから高いものまでいろいろとあるよね、という話になりました。そして、抽象度の低いキッチン用品や食器を買いたくなる理由の話などもしていきました。

  • エッグスタンドや炊飯器は、茹で卵や白米を毎日食べる人は専用の道具を買うのではないか
  • りんごの皮むきをナイフでやるのはコツがあって難しいので専用の道具が生まれるのではないか
  • キッチンは広さの制約があるので、よく使う道具や代替の難しいものを優先的に置きたいのではないか

というふうに、キッチン用品や食器の場合にはタスクの難易度や頻度によって抽象度の低い道具が使われるのではないか、という仮説が立ちました。

私たちが作っているソフトウェアに置き換えて考えると、Excelでもできる業務でも、やはり難しかったり頻度が高かったりする会計ソフトや人事労務ソフトのような専用のソフトウェアが欲しくなってきます。そしてその中でもまた、難しいタスクについてはタスクベースなUIも必要になるのではないか、という見方をすることができます。

輪読会のこれから

7月にはじめた輪読会ですが、いよいよ後半戦のワークアウトに入ろうとしています。せっかくの輪読会なので、ワークアウトも各自がデザインを作ったものを見せあうかたちでやろうということになっています。ふだんデザイナー間で、同じ目的のデザインを作って見せあうということをあまりする機会がないので、これからが楽しみです。

freeeのUXチームではこの輪読会以外でも、引き続き社内での輪読会やワークショップのような取り組みを続けていこうとしています。UXチームに興味のある方は、ぜひ採用情報なども見てもらえると嬉しいなぁと思います

www.wantedly.com www.wantedly.com www.wantedly.com jobs.freee.co.jp