• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
2021年07月31日

タブブラウザと表示位置問題

先週我が家にiMacがやってきました。ようやく普通のレスポンスで文字が書けるようになって快適になりました。でも、人間、不快なことにはすぐにイライラしたりムカついたりするもんですが快適なことには感動したりはしませんのね😅 そして、失くしてから気づき、感動するんですね⁉️
#本筋とズレるが、パソコン上でワンボタンで絵文字が出せるようになるなんて画期的

さて。新しいパソコンということでいろいろとセットアップしたりしながら使い始めているわけですが、そんななかで思ってしまったネタについて一つ書こう。

今回のお題
タブブラウザ:操作ペインの配置問題 - UI、そのポリシーとユーザービリティ

マニアックな人はめっちゃこだわるけど、多くの人は気にしていない、そんなネタです。作り手や使い手の考え方や度合いが見え隠れする面白い部分でもあります。

いまやパソコンだろうとスマホ・タブレットだろうと、ブラウザを使わないということはないかと思います。そして、そのほとんどはタブブラウザだと思います。スマホだとあまり「タブ」って主張しないものもあるかもしれませんけど・・ スマホではいろんなブラウザ使ったことないので今回はパソコンのみでのお話となります。たぶんなります。
また脱線するが(いつものこと)、「〇〇になります」という言い回しが嫌いです。でも、今回は、これから書き進めていってたぶんそうなるだろうというニュアンスを含んで言っているので「お話となります」で多分あってる、と思いますです、はい。

その昔、それこそ20世紀のブラウザにタブなんてものはありませんでした。今はブラウザに限らずいろんなソフトにタブありますけど、当時は1ドキュメントに1ウィンドウ(SDI)でそこらじゅうに開きまくるのが主流でした。
タブブラウザなんていうものが登場したのは、プリウスよろしく「21世紀に間に合いました」くらいの時期だったと思います。いや、間に合ってなかった気もするがそんな厳密なことはここでは重要ではない。おそらくは1つのウィンドウに複数のドキュメントを持って切り替えできるという普通のオフィスソフトのような振る舞いをする(MDI)タイプのブラウザが21世紀に間に合ってはいたけど、タブというUIが登場するのはギリギリセーフかアウトかくらいだったかな。

<タブのない時代(例)>

IEとネスケとか懐かしいっすよね⁉️
<タブな時代(例)>


初めてタブブラウザを見たときには、たぶん他の人とは全く異なるところで衝撃を受けました。

『んじゃ?この支離滅裂な気狂いなUIは⁉️』
20世紀のマイクロソフト・オフィスのデタラメUIなオプションダイアログを思い起こさせるくちゃくちゃなもの。思考回路が破滅する😱



何が脳みそ狂わせてんだか、これ読んでる方のほとんどはわかんないかもしれませんね。
上記のOfficeのオプションダイアログ見ても特に問題と感じない方は、非常に適応能力が高く、つまらないところでこだわりやプライドを持たないでうまく世間や時代に合わせていける、そういうタイプの方だと思います。今そこに有るものを受け止めてそれに適応していくタイプ。いいとか悪いとかじゃないです。
さて、まずは、このOfficeダイアログの問題点を述べていこう。
2番目に問題だったのは、多段タブであったこと。え?一番は?それは私の都合で後から🙏
タブが3段あります。上の段のタブを選択するとタブの上下が入れ替わるクレイジー仕様です。常に同じ位置にないために迷子になります。自分だけならともかく、「ちょっと教えて!」なんてシチュエーションでは・・・
ちなみに、当時でもこの『多段タブ』っていうやつはUI設計するときにやってはいけない手法の代表格の一つでした。マイクロソフト刊行の設計のための参考書籍なんかにもそう書いてあったのに。。。
ちなみに、1番の問題は、<ツール(ソフト)全体に適用させるオプション>と<現在の文書にのみ適用させるオプション>が混在してごっちゃになっていること。最初の頃は、「この文書だけこれこれの設定したいんだけど、どうしたらいいんだろう?」って、まさかこんなところにあるとは思わず、すげー無駄な時間使った。
2つの問題の相乗効果(笑)で、、、、しょっちゅう怒り狂っていたものだ。大学生当時の研究室には空の段ボールを常備していた。蹴り飛ばして発散するためだ。
そのUI(だけじゃないけど)には、すぐに慣れはしたが、最後までしっくりこなかった。

そして、タブブラウザの登場である。これでウィンドウありまくり〜のタスクバーのウィンドウタブが小さすぎて選択できね〜のから解放される!と思わせるものだったが・・・
出始めの頃は、いくつかつまみ食い程度に触ったものの本格的に使うことはなかった。それは そのUIに対して決定的に拒絶反応を示してしまった からである。ただし、慣れないものに対する恐怖や不安といったものではなく、私にとってOfficeの例のアレのような怒り狂うレベルのものだったのだ。

初期のタブブラウザの代表的なものはこんな感じだった。
ITmediaさんより拝借

本体コンテンツエリアが中心にあり、下部にステータスバー、上部にいくつかのペイン(表示領域)がある。
メイン領域の直上に<C>タブペインがある。その上に<B>ブックマークペインがあり、その上に<A>ナビゲーションペインがある。Windows向けだとこの間にメニューペインがあったりする。とりあえずこの例のメニューペインも言いたいことあるけどとりあえず今回はそこはスルーし、<A><B><C>の位置関係について。

タブブラウザは、複数のドキュメントを開き、それらドキュメントをタブを選択することで表示切り替えすることができる。言い換えれば、「タブ」を選択するとそのタブに関係づけられたドキュメントを表示するわけで、タブにドキュメント情報が包含されているというイメージづけがなされる。ここが重要‼️
ここで振り返って<A><B><C>の各ペインにどのようなアイテムがあるのかを見ていこう。
<A>ナビゲーションペインには、「戻る」「進む」「再読み込み」「URL表示/編集」など、ドキュメントの情報とそれらの操作を行うボタンが含まれている。
<B>ブックマークペインはブックマークを表示・選択するものであり、表示中もしくは裏で開いているドキュメントと紐づけられるものではない。
<C>タブペインには、表示中もしくは裏で開いているドキュメントをタブという形で表示し選択できるようになっている。

ざっくりと何が問題なのか。
タブというUI部品は、ただいくつかの選択肢を見せそれを選択する機能を提供するだけでなく、タブの内部にはその選択されたアイテムのコンテンツを表示するという性質を持ったUI部品なのである。つまり、タブには中身というものがあるのだ。
・・・それなのに・・・ドキュメント表示の本体部とそれを選択するタブ部品より外側にドキュメントの情報表示や操作部品があるのだ❗️😨
これぞ、Officeの時に問題だった<ツール全体に対するもの>と<ドキュメント固有のもの>が一緒くたになった(分離されていない)、脳みそが迷子になる作り方なのだ。

それで、怒り狂って拒絶反応を引き起こしてしまったわけです。

振り返ってみれば、この時点で私はすでにソフトウェア業界の開発者的脳になっていたんですね。きっと。

その後、もうタブなんていらない思考に陥っていた頃にChromeが登場します。


このときは、見向きもしませんでした。
一つには、もうFirefoxでゴリゴリにカスタムしまくって、ちゃんとタブを上に表示するという、まさに周りに逆行する独自路線を突き進んでいたから。
そこで、「いまさら新しいブラウザなんて」と。
見向きもしなかったので、上記図のようにデフォルトで
タブという枠があってその中にコンテンツがある
という素敵なUIになっていることに気がつかなかったんですね(笑)


でも、このUIってやつには一筋縄ではいかない部分があるのです。

Windowsという厄介者があります。
あ、私Apple信者ではないですしMacこそ使いますがWindows普通に使いますしモバイルはAndroid派です。ただWindowsに関してMicrosoftにはコノヤロー的な思いは持っています。その点について少々。

Windowsが登場する以前。
パソコンといえば文字が出るだけの端末で、はたから見たらよーわからん物体でした。
一般向けではないところではUnixなんてものがあってOSは文字だけの世界だけどなんかグラフィック表示するソフト的なものがあってその上でたくさんウィンドウ広げて、やっぱりバンバン文字打ってるっていうこれまたよー分からん世界もあった。←これは今でも普通にある ちなみに少し興味のある方ならLinuxなんていうものを知っているかもしれないがそれもこれである。
そして、macなんてものがあった。いまでもあるが。これもまたUnixである。これがその他のUnixとちょっと変わってるのはコンピュータに詳しくない一般コンシューマ向けであること、そのため(かどうかは知らんが)文字をバンバンうつってところが徹底的に隠されている。

さて。
一般コンシューマー向けとしてはグラフィカルなOSを搭載してぼちぼち成功し始めていたmacに対して対抗心バリバリで挑んできたのがWindowsである。
そこは良かったのだが・・・
今から見れば、あまりにも技術的に稚拙であり、特に何よりも「ユーザビリティ」とか「ユーザエクスペリエンス」といった観点が欠けていた点が残念であり、厄介者となっていくわけです。
でもMicrosoft的には商業的な成功を大きな目的として掲げて発売しただけで、しかも実際に成功したってだけなんでしょうけど。そこにユーザ視点なんてものなかったと思っています。

そして、罪深いのは ことごとくmacの反対をいった ってことです。
商業的観点でライバルと差をつける一番安直な方法です。これ自体が悪いとは言いませんが・・・何事にも意味はあると思うんです。その意味を理解または解釈した上で、自分たちの基本となる考え方、ポリシー、プライドを持って決定していったというなら良かったと思いますが、結果を見る限りにおいてそのようには思えないというのが非常に残念なんです。
macが左にあるものをたんに右にしました。ではダメなのです。なぜ左にあったのか?その理由があるはずなんです。その理由が誰目線で都合がいいか合理的かはそれぞれにあると思いますから、macが左側だからといってWindowsがその企画・設計ポリシー上で〇〇目線で見たら右の方が優れている、という判断をしたというならそれでいいことです。いや、そうだったんでしょう。ただ、その「〇〇」があまりに自社都合すぎて残念だったってことですかね。
たぶん、技術的に悪気があってやったことではなかったと思っています。ただ単にそういったことに興味関心がなくて気が付いていなかったとか認識がなかったとか、そういったことだと思います。

でも、ことほど左様に、悪いと思いつつもついやってしまうことより悪気がなかったという方がずーーーーーーっと厄介でタチが悪いです。
「悪いと思いつつ」ということは、認識はしているわけです。その後の行動を間違ってしまっただけです。なので、次からはその行動を改めていただければそれでいいだけですし、おそらく当人もそれがわかっています。
「悪気がなかった」ということは、認識してないわけです。認識していない人にまず認識してもらうというのは非常に難しいことです。往々にして外部からはできません。でも、認識しないと次に進めません。


突然ですが

『煽り運転はいけません』
この話題が出る時に必ず出てくる考え方がありますね。
「煽る奴が悪い。それは間違いない。でも、煽られる方も問題あるよね。」
でも、ここで思考が止まっていたらたぶんずっと煽り運転は無くなりません。
なぜそうなるのか?振り返って考えてみないと。「なぜなぜ」とか、なんだかトヨタ式みたいw
ひとまず、煽る奴は絶対的に悪いです。なのでそちらは置いておいて煽られる方にフォーカスを当てて考えていきます。そこツッコンでの誹謗中傷だけはやめてね。

そこで煽られちゃったって例を考えてみよう。
(例)以前TVでも出ていたケース
自車Bが信号交差点を右折するシーン
信号が青。対向車Aが来たが左折だったので(ぶつかることはないと思い?)右折を開始した。タイミングが重なる感じだったが(ちゃんと?)衝突することなく右折を終えることができた。
その後右車線を直進しているとA車から煽られ、次の赤信号でA車が左側から自車前方を塞ぐようにして停まり、運転手Aが降りてきた。

そして、この運転手Bさん「煽られるようなことをした覚えはない」という。

道交法違反とかマナー違反モラル違反、ツッコミどころがいくつもある事例なんですが、重要なポイントは『煽られるようなことをした覚えがない』という点だ❗️
そのまま放送しちゃった日テ○さんも相当なもんだと思う

まずBさんですが、これっぽっちも悪気はないんですよ。じゃないとドラレコ映像をTV局に売るとかしませんね。さすがに渡す前に自身でも見直したと思うのですが、この映像を見ても気づかなかったってことは、まったく意識がないんです。

もし 急いでるから とか これくらいなら大丈夫だって とか、そんなことだったら、次はそんな場面でもちょっと堪えようって、それだけの話なんですが、そうじゃない。
なんとかしてBさん自身が気が付いて認識しないことには、その行動が変わりません。

もし、「煽り運転をなくす」というだけであれば、Aさんの立場の方が全員煽り行動をしないということでなくせる可能性はあるかもしれない。
でも、Bさんの行動は違反行動だし事故の要因を作っているし煽り運転の要因も作っているし、本人が気づいていなかろうと周りが迷惑している事実がある。
Aさん廃絶運動、Bさん野放し では、新たな問題を起こすだけだし、なによりもちゃんと意識して行動している人が納得できない。これもまた正直者が馬鹿を見るの典型となってしまう。

正直、煽り運転の8割くらいはこのような無関心・無責任な方が意図せず挑発行為者になってしまったパターンじゃないかと思っている。

また、煽る人目線で考察してみようか。
よく言われるのに「そんなちょっとした事で腹立てるなよ。。」というのがある。はっきり言おう。それは間違っている。
煽り運転でも交通事故でも同じなのだが、再発防止を考える際に 感情をコントロールする というのは半分間違っている。半分というのは今から述べる。
正しい半分は感情というところに視点を置くという事である。間違いの半分は感情そのものをコントロールしようという事である。
感情というのは生理現象なのでコントロールできる因子ではないのだ❗️
再発防止策として「怒らないようにしましょう」って決めたとしても、できないことなので、再発する。
まずはその点を冷静に受け止めないと先へ進めない。
コントロールできるのは、怒りなら怒りという感情が発生した時にどう行動したらいいのかという部分だ。怒りの感情なら最近はアンガーマネジメントなんて言葉があるが、怒りだけでなくさまざまな感情を整えるエモーショナルマネジメント(!?かわちゃん語)を考えた方が良い。他人の行動に対する怒りだけじゃなく、例えば自分のイケイケとかウキウキとかもマネジメントしなあかん。

で、もっというと、いざ感情スイッチが入っちゃった時には冷静にもなれないし時間的猶予もあまりないことが多いと思うので、できれば常日頃からイメージトレーニングしておくと良いと思うのだ。私の場合、車にせよバイクにせよ運転することに対するイメージトレーニングはすでに趣味だったりする。

さて、これを屁理屈だと言ってしまうのは・・気持ちは分かるが、それでは残念ながら認識できない人間と同じだ。

煽り運転だけでなく、交通事故もまたそのような無関心・無責任運転によって引き起こされているものが少なくないように思う。っていうか、無関心・無責任運転の結果が煽り運転だったか交通事故だったか何事もなかったかっていう違いだけで本質的には同じ。

バイクや車という「モノ」に興味関心を持たなくてもいいけど、運転する以上は運転をする「コト」には興味関心を持っていただきたい。運転すること自体に関心があったなら、上記例のBさんのような運転はしないし、もししてしまっても、自身で反省することができると思う。




さて、話を戻そう。

パソコンにしろスマホ・タブレットにせよ、画面上のアプリというか画面そのものは基本的に左から右方向、上から下方向に流れている。作る側はそのように設計しているし、実験でも多くの被験者さんがそのような捉え方をしていると出ている。
なので、当初のmacのウィンドウは右下に大きさを変えるつまみがあったし、閉じるときは左上に収束していく形で左上に閉じるボタンがあるのだ。そう、人間工学的に意味のあることだったのだ❕ だからなのか、私は未だに右上に閉じるボタンがあるのがしっくりこない。慣れていて不自由はないけど。
他にもいっぱいあるのだが、これだけにしておこう。


さぁそろそろスタックを空にして(コンピュータ関係の人でないとわからないかな)タブの話に戻ってこようか。

タブブラウザが出始めたのは振り返るともう20年くらい前なんですね。そしてChromeが出てからは・・・15年くらいかな。現在はどうだろう。
パソコンwebブラウザでは Chrome と Firefox の二者かなということろ。なんでもいいという理由でIE/EdgeやSafariを使っている人はたくさんいるけど、、、あえてそれがいいという人は少数派だと思う。
で、現状見ると、Safari以外(MSはIEは辞めた体で)はタブが上で中に(下にと言わないww)ナビゲーションペインがあるのがデフォルトとなっている。
まぁ、あるべき姿を見つめなおしてこうなったんじゃなくて、Chromeが評判いいからこうなっていったのかもしれないが。

しかし、ユーザビリティやユーザエクスペリエンス面から見ると、興味深く面白いがとても厄介なことが見えてくる。

これから新しく使い始める方にとって、ユーザビリティやユーザエクスペリエンスを考えて作られているUIは使いやすくていい体験ができる。
しかし、これまで使い慣れていたものから変わった場合、自分の習得した使い勝手やUXを捨てたくないという心理が働き拒否反応する。どうにかカスタムして以前と同じにできればいいが、できなくなると怒り出す。

そう。デファクトスタンダードには勝てないのだ‼️
一度出来が悪いUI作ってしまうと、変えないと怒られる、変えても怒られる、な状態になる。だけど、そんなところに凝っているといつまでもリリースできない。そして、先発でクソUIなものが出て広まってしまうと、後発で違うUIにできないとか、悪夢が見える。
だからといって、なんでもカスタムできるような作りにすると複雑で使ってられないものができたりして、それもねぇ。
#アプリ作成時には[OK][キャンセル]をどちらを左にするかで悩むっていうレベルなんですよ。。。

で、今のFirefoxは標準状態でタブが上にあるのだが、最初にこのレイアウトにしたバージョンでは、(ネット上の)世の中にクレームの嵐だったように記憶している。
歓迎する方も多かった一方、これまでと違うというだけで大バッシングだった。今でもバージョンアップのたびにデフォルト=タブが上に戻される(※)って言葉がネット中に吐き出される。

※)「戻す」という表現が非常に面白いと感じている。が、ここでは流石にもうこれについて展開するのはやめよう。



でもま、最近はユーザビリティとかユーザエクスペリエンスとか言いながら、自社都合で『いかにユーザに押させるか』的なユーザ不在のコンテンツがなんと多いことか😮‍💨
ブログ一覧 | くだらないネタ・戯言 | 日記
Posted at 2021/07/31 17:13:07

イイね!0件



今、あなたにおすすめ

ブログ人気記事

TEAM♦️MEISTER ♦️v ...
taka4348さん

愛車と出会って5年!
LJSさん

街道レーサーさんの集り!
のうえさんさん

どんより曇り(昨日の)
らんさまさん

別所沼公園の桜が咲きました♪
kuta55さん

お得意さん⑨。
.ξさん

この記事へのコメント

コメントはありません。

プロフィール

「ロードスターのエンジンが驚くほど滑らか。極気持ちよし。」
何シテル?   10/21 21:38
かわちゃんです。名前被り回避のため変なのついてますが気にしないでください。 Automobile Driving and Motorcycle Riding ...
みんカラ新規会員登録

ユーザー内検索

<< 2024/3 >>

     12
3456789
10111213141516
17181920212223
24252627282930
31      

リンク・クリップ

フレームレス自動防眩ミラー取付 
カテゴリ:その他(カテゴリ未設定)
2020/08/22 09:23:29

愛車一覧

マツダ ユーノスロードスター ゆかちゃん (マツダ ユーノスロードスター)
以前からいいなぁと思っていたロードスター。 このたび『このクルマを手に入れるほんの少しの ...
ドゥカティ モンスター937 希生ちゃん (ドゥカティ モンスター937)
なんと水冷エンジンで排気量もスクランブラーより大きいのに軽い!ということで試乗したら・・ ...
ダイハツ ハイゼットトラック 杏奈ちゃん (ダイハツ ハイゼットトラック)
7代目通勤車 2022/08/20:納車 2022/07/30時点:納車日決定:8/2 ...
ホンダ グロム125 美友ちゃん (ホンダ グロム125)
YAMAHA VOGELの皮を被ったHONDA GROM 125!? 位置付けは足バイ ...

過去のブログ

2023年
01月02月03月04月05月06月
07月08月09月10月11月12月
2022年
01月02月03月04月05月06月
07月08月09月10月11月12月
2021年
01月02月03月04月05月06月
07月08月09月10月11月12月
2020年
01月02月03月04月05月06月
07月08月09月10月11月12月
2019年
01月02月03月04月05月06月
07月08月09月10月11月12月
2018年
01月02月03月04月05月06月
07月08月09月10月11月12月
2017年
01月02月03月04月05月06月
07月08月09月10月11月12月
2016年
01月02月03月04月05月06月
07月08月09月10月11月12月
2015年
01月02月03月04月05月06月
07月08月09月10月11月12月
2014年
01月02月03月04月05月06月
07月08月09月10月11月12月
2013年
01月02月03月04月05月06月
07月08月09月10月11月12月
2012年
01月02月03月04月05月06月
07月08月09月10月11月12月
2006年
01月02月03月04月05月06月
07月08月09月10月11月12月
2005年
01月02月03月04月05月06月
07月08月09月10月11月12月
ヘルプ利用規約サイトマップ

あなたの愛車、今いくら?

複数社の査定額を比較して愛車の最高額を調べよう!

あなたの愛車、今いくら?
メーカー
モデル
年式
走行距離(km)
© LY Corporation