細かいところ最終回。今回はサクッと大雑把に気をつけておきたい点をまとめてみるよ。
そして若干、辛口だ。
UI/UX構築の際に、個人的に気をつけてるポイントを数点。
実際の現場では、いろいろな機能を作りながら自然に『これ必要だよね』、『これも必要だよね』、『じゃあまとめようか』なんて流れになることって、案外あると思うんだよ。でもそういう流れなら、一度手をちょっとだけ止め、考えなおしたほうが良いかもしれないこともある。
『まとめたいのは開発者達の脳内だけの話であり、ユーザは別に求めてない』わけだから、開発者都合でいろいろな機能をまとめちゃうとユーザが困るだけだと思う。
俺の嫌いな『”サービス”じゃなくて”機能”の縦割り』状態ね。Photoshopのメニューの中だけを見せても、何ができるのかって、今から初めてPhotoshop使うユーザはわからないと思う。それが機能の縦割り。
そうじゃなくて、『**ができます！』『**と**にも対応！』とかって具体的に書かないとダメだよね。それがサービスの縦割り。『せっかく撮った写真に写ってる、邪魔な電柱や建物、人物などを2ステップで消せます！』とか。
機能の縦割りだと多分、なーんも考えずにスマートフォンとかで便利アプリダウンロードしまくってるユーザからすれば、ただの『退屈』なナニカでしか無いと思う。
というわけで、早速行ってみよう。
注意点として幾つかピックアップしてみよう。
配置に気をつける
特にこの2つは開発者としてはかなり注目してる人多いんじゃなかとおもう。
スタジオパークに関しては、jQueryの『Masonry』というライブラリを使ってHTMLコンテナの動的レイアウトを実装してるようだけど、これもある意味レスポンシブと言える。個人的にはこのライブラリ自体の構造が優れているので、こんな使い方もできるよね、という良い例だと思ってるんだ。
まぁこれはPCなどのブラウザサイズを変更することができる環境でのみの話なんだけどね。
それからBootstrapはバージョン3になってからモバイルファーストになったので、PCで見るよりPCで作ったものをモバイルで見せる、という部分に注力されてると思う。
ナビゲーションが変形してしまうわけだ。
NHKスタジオパークの場合、多分意図的だろうけど、すべてのHTMLコンテナに画像が入れられているし、アニメーションするので、どのHTMLコンテナがどこに移動したのはかかなりわかりやすい。
しかしBootstrap系ライブラリをそのまま素直に実装した場合、ブラウザサイズを小さくすると、ナビゲーションが『消える』わけだ。消えて、1つのボタンになる。そのボタンをクリックもしくはタップすると、今まで表示されていたナビゲーションが表示されるという仕組み。
PCであれば、マウスオーバーでナビの場所を説明させることもできるし、小さなツールチップを初回から数回にわたって表示させる、コンシェルジュ的な見せ方もできるだろう。
しかしスマートフォンやタブレット端末のようなタッチデバイスだと、『マウスオーバー』という概念がない。これはFlashをいじってる人は過去に苦い思いをしたことがあると思うけど、マウスオーバーの概念が無いということは案外見せ方が狭くなってしまうわけだ。
そこら辺を踏まえてHTMLコンテナのレスポンシブによる配置換えには十分気をつけたほうが良い。
というわけで、できれば『Masonry』はじゃんじゃん使ったほうが良いと思う。
ブラウザサイズなんかそんなにしょっちゅう変えて見る人いないわけだし、そこにコストかけるのもどうかとは思うけど、モバイルファーストなら話は別。
Nexus7やiPadなどを持ってる人は、それらのモバイル端末から先に作るのがPC向けにも優しいんじゃないかな、と思うわけだ。
閉じるボタンには注意が必要
もうなんていうかさ、何も考えずに、出来の悪いWebデザイナが先入観だけで閉じるボタンを作るとこうなるよね、の典型がGoogleに多い。多いというか多すぎる。
YouTubeのヘルプだとダイアログが表示されるけど、やはりここでも右上に閉じるボタンが表示されてる。
グレーになった部分はドラッグが可能なのに、なんとテキストボックスと検索ボタンまで用意されてしまっている。
テキストボックスはまだ良いけど、検索ボタンと閉じるボンタはどうなのかと思う。ドラッグできるんだよ？ここ、クリックされるものが、ドラッグされるものの中にあるんだぜ！？
ドラッグ仕様として間違えて検索ボタンクリックしたら検索結果が表示されるだろうけど、間違えて閉じるボタンクリックしたら閉じてしまうじゃないか、と。
このダイアログはヘルプなので閉じてもそれほど致命的じゃないけど、閉じたら検索結果はどうなるのか、と。
試しにやってみたが、検索後に閉じて再度ひらくと、検索結果はクリアされていた。何がしたいのだろうか。
他にも色いろある。『通知』などが最悪の作りをしている。この通知だけど、クリックするとアコーディオン的に開き、中を見ることができる。
とは言え、クリックしたらよくあるパターンみたいにスーっとアニメーションするわけじゃなく、パッ！！！っと切り替わってしまう。
この時点で誤動作をかなり誘発するという仕組みになっている。
はっきりいって、Googleが何を考えているのかよくわからん。わからんが、これはダメな例として最適だと思うので、解説を続けようと思う。
つまり操作するまでもなく、見ればわかる、というやつだ。
しかしこの場合、クリックして開くのかどうか、シェブロンがあるところしかヒントがない。しかもYouTube内ではユーザアクションに対するインタラクションは統一されておらず、クリックすると何が起こるのかは、何度か経験しないとダメな酷い作りになっているわけだ。
ある程度統一されていれば、『なるほどここはクリックするとスーッと下にスライドして中にあるコンテンツが表示されるんだな！』と思い、クリックするだろう。しかし、クリックするために精神的にコストがかかるようでは、UI設計のミスとしか思えない。そんな状態でUXがどうたら言うようなら、もはやお笑い種である。
そしてこんな酷い最悪の詐欺に等しい作りをしているのにもかかわらず、更に酷いギミックが施されている。
なにもなかった場所に、気軽に押してはいけない機能を持つボタンが何の前触れもなく突然表示されるという、最悪の作りをしている。
もしテキストやアイコンじゃない、空白部分をクリックする癖のある人がここをクリックしたら、瞬時に閉じてしまうではないか、と。
GoogleがYouTube上で、このようなわけのわからん次世代風UIを使い、コンテンツとしてクリックされて中身をみせたいのか、それともただクリックされれば中身なんかどうでも良いインチキアフィリエイターのような感覚で実装しているのは、俺には分からない。
本当に意味不明の作りをしている。最悪というのがちょうどよいだろう。
天才を集めると、大きな一つのバカの塊になるのではないか？と思ってしまったくらいだ。
このような閉じるボタンは迷惑でしか無い。そして詐欺に近い。なにが『我々は悪ではない』だ。笑ってしまう。俺は彼らのように天才ではないが、物事の善悪はわかるつもりだ。
はっきり行ってGoogleは、自分たちが一般ユーザに対して常にストレスを与え続けていることを全く理解しないくせに、自分たちは善意を持って行動しているという大いなる勘違いをしているのではないか、という疑問がある。
実際問題俺はこのような意味不明のUIにおいて極めて迷惑を被っているので、彼らは基本的に『悪』だと思ってる。
とは言え、別に彼らが『悪』であろうが『善』であろうがどうでもよく、『俺にとって有益』か『俺にとって無益』かでしか判断してないので、別に『悪』でも良いけど、そのうち嫌われるよ？と言いたい。
CRUDへの意識
CRUDというのはWebデベロッパなら全員知ってると思うけど、いわゆる『追加』『読込』『更新』『削除』の機能のことだ。例えばBloggerで読者になったとすると、読者として新規でURLが『追加』されたことになる。これはCRUDの『C』、つまり『Create』だ。
同じように、読者を辞める場合は『削除』になる。これはCRUDの『D』。つまりDeleteだ。
『R』は読込、つまりReadであり、『U』はUpdate、つまり更新、ということになる。
しかるべき機能なんだが、訳もわからず追加だけできて、編集すらさせてくれないという実装をしたサービスがあるのをご存知だろうか。
代表的なものとしては、Facebookだ。一度何かポスト（Create）してタイムラインに表示（Read）されると、後は削除（Delete）しかできない。編集、つまり更新（Upodate）ができないのだ。
これななぜなのか？
写真をポストした場合は編集ができるという情報もあるが、普通は出来て当たり前の機能なんじゃないのか？
CRUDはワンセットだ。
本名をコロコロ変えられると怪しい人物になってしまうから一定期間に数回しか編集出来ない！というのはサービスレベルとして理解できるけど、機能として必要なものが『無い』というのはどういうことなんだろうか？
通常はCRUDは機能として実装しておき、サービスレベルで『見せるか見せないか』、『使わせるか使わせないか』を判断するものなんじゃないのか？
不思議でたまらない。
仮にデータベースへの負荷を考慮してるとしたら、そんなショボいインフラが理由で必要な機能実装しないという、コンセプトもあったもんじゃない状態ってどうなの？とは思う。
スタートアップ企業が資金調達したばかりだからこれから直すよ！的な状況ならまだわかるが、Facebookがいかに今低迷してるとはいえ、大企業だ。編集くらい普通にできるだろうとは思う。
これまたGoogleのBloggerの話になるが、読者になった後、よく考えたらこの人のブログはあんまり読んでないな、と思い、読者をやめようと思った時に、辞め方が一切不明ということだ。
当時のヘルプには、相手のブログを表示し、そこに表示されている読者ガジェットから読者を解除することが出来ます、的な事が書いてあった。
ありえねぇ！！
アホか？とおもった。
だって、相手のブログがまだ存在してるのが大前提。それに加えて相手のブログに読者ガジェットが組み込まれているのが大前提でしょ？
あんなに簡単にテンプレートやレイアウト変更でガジェットを好きに組み合わせられる仕組みを実装＆提供しておいて、そんな不確定な方法でしか読者の解除が出来ないとか、映画『サロゲート』じゃないけど、脳みそが液化してるド低脳が考えつくクソヘルプなんじゃないの？って思った。
現に2名ほど、すでにブログ内に読者ガジェット配置してない人がいたので、俺は何も出来なかった。
まぁ実際にBloggerは未だに酷い作りをしているので、クソの領域を脱出するには相当時間がかかるとは思うけど。※未だに俺はBlogger愛用してるけど、そういう意味で全く期待をしてない
で、一時期それで大激怒して問い合わせようと思ったけど、当時は問い合わせる手段がよくわからなくて、泣き寝入りした。さすがストレス与える天才集団！！！天才すぎる！！！
m9(´・ω・｀)
そして現在では若干仕組みが変更され、相手のブログに行かなくても読者を解除できるようになっている。
当たり前だろが！
とは言え、そのやり方が非常にわかりにくい。
まずは自分のダッシュボードヘ進み、ページ下段に表示された読者のブログサマリーエリアにある、ギアのアイコンをクリックする。ギアアイコンは右の方に表示されてる。
なんだか本当によくわからん。同じ形のアイコンで、別の挙動をするケースもあるわけで、何がしたいのか本当に理解が出来ない。
で、クリックした後、マウスポインタがBusy状態なのに気がつく。
つまりこれは、単純に読込に時間がかかってるということだ。
でもこれおかしいだろwww
ページ遷移してからローディング画像とかにするのが普通じゃないの？と。
まぁ良い。さすがの天才集団だから、さすがだ。
で、読者になってるブログ一覧が表示されるんだが、ここからはまだ読者を解除することが出来ない。リストになってるので、ここでCRUD全部が出来なくもいいとは思うが、『設定』というテキストリンクをクリックする必要がある。
普通『編集』じゃないの？
※他人のブログだから『編集』じゃなくて『設定』なんだよ、とも思うが、それでも他人のブログを『設定』っておかしいと思うので、わかりやすい『編集』にしておくのが良いと思う
『設定』をクリックすると、懐かしの！サイズ指定の別ウィンドウが開く。懐かしい！！！
新しさの中にも懐古主義が見え隠れ！！！
さすが天才集団だ。天才すぎる。
そしてその別ウィンドウの中に『このサイトの読者をやめる』リンクを発見できる。
これを発見したときは、『15年前に流行った、次のページにいくURLがソースとかのコメントに隠されたクイズサイトかよ』と思った。
今はDoodleとかいう検索に全く関係ないどころか余計なリソースを消費してただの邪魔なだけになってるギミックを必死になって人件費じゃぶじゃぶ消費させて実装させて遊んでるようだけど、こういうところでもさすがに遊び心を忘れないという天才集団だ。
さすが天才だ。
というわけで、こんなアホな遠回りさせることはせず、CRUDはなるべく同じ場所にまとめておいてほしいと思う。
そして機能としてはしっかり実装し、サービスにあわせて適切に表示しておいてほしいものだ。
最後に
まぁ5回に分けて言いたい放題言わせてもらったけど、タブレットとかスマートフォンとかがデスクトップPC、ノートPCより遥かに優先度が高くなってきた昨今、ある意味これといった正解がまだなく、混迷している時代に突入しているのかもしれないとは思ってるんだよ。YouTubeとかFacebookの実装は明らかにおかしいとは思うけど、それ以外はどうも、古いシステムとこれからやりたいシステムが混在しているというか、最初から設計間違えてる『茹で蛙システム』だったりとか、とにかく見苦しいものが多すぎると思って、この連載を開始してみたんだよ。
簡単に言うと、『え？なにこれ？イミフ！マジキチ！！！』とかって思うUIが多すぎるわけ。
俺自身、15年ほど前からITに関わってる古い時代に生きた人間だ。そんな俺の意見なんざ、若者が聞いたところで、ただの老害の戯言と思うかもしれない。
これから社会的な環境としても、今より更にモバイル環境が整っていくと思ってる。
それこそ小学生、中学生、高校生、大学生、社会人、そして老人にも等しくだ。
そしてこれから少子化の時代になる。同時に高齢化社会になる。
そういう時代になった時に、でっかいアイコンが6個並んだだけのフラットデザインという手抜きデザインを実装したトップページを見て60歳過ぎた老人はすぐにサービスを開始できるのだろうか。
俺は、そういうことを勝手に一人で懸念してる、ただの老害なんだ。
facebook
twitter
google+
fb share