circumstance evidence

状況証拠 – ヤザキユウイチ

キーボードとマウスとディスプレイ

キーボード
日本語対応したハードウェアキーボードは、まだ改善の余地があるんじゃないかという話。
入力モードが英語兼ショートカットと日本語の2モードあるのに、現在どのモードを選択中かをハードウェア的にわかりやすくなっていないんじゃないかと。せいぜいランプの点灯をトグルスイッチ的に表示しているだけとか。
Photoshopでショートカットを使うんですが、英語入力モードでないと有効ではなく、操作直前にモードを確認する必要があるんですが、これがちょっと面倒で。個人的にはソフトウェア的に目立たず大きく表示してくれるImageUpを入れているのと、相対切り替え(押す度に日英切り替わる)ではなく絶対切り替え(押せば必ず英語入力モードに)のキーバインドを設定しています。
やや脱線気味にPhotoshopの話を続けると、iPhoneアプリでショートカット集をソフトウェアキーボード化したアプリでPhotokeysというのがありましたが、英語圏のアプリなので特に強制的に英語モードにするわけではないので操作直前に確認するというプロセスをはさむことになり、心理的なワンクションや実際の手間は変わらず。入力時、矯正的に英語入力に切り替えて、その後操作前の状態に戻してくれるのであれば有用かなと思います。誰か作って!
以下Photoshopの話から一般的な文字入力に話を戻しますが、その点、iPhoneでいいなと思うのが、ソフトウェアキーボードであることで、これはナビゲーション用ボタン、これは英語キーボード、日本語キーボード、と出し分けることができること。入力がしやすいかはここでは問題にしませんが、少なくとも何が入力されるか自体は迷いようがない(入力したい文字が画面上にない場合は迷う可能性がありますが)。
ソフトウェアキーボードであることが、たどり着く唯一の正解とは思っていないんですが、ハードウェア的に解決はされていないんじゃないかと。
制作に使う場合とウェブブラウジングなど遊びに使う場合など目的にもよると思いますが、例えば仕事でPC使わないでリタイアしたシニア世代とか、キーボードになじみのない人たちにとっては現在のキーボードはエンジニア専用端末すぎて使いづらいんじゃないかと。これおそらく英語圏の人たちはあまり問題意識を感じないと思うので、なんとか日本製で良いものが出てこないかなー、と思ってます。英語よりも合理的な、日本語の50音配列を生かした配列の文字入力デバイスというか。

LEADING EDGE DESIGNさん作のメディアアートっぽいプロダクトで、tagtypeというものがありました。
日本語の50音配列を生かし、行選択のち列選択で文字を確定させる感じ。すばらしい。これは市販されていないはず。
障害を持たれている方をそばで1ヶ月近く観察して、ゲームコントローラを流暢に扱っているのを見たのが発想の原点とのこと。
実際に手にとってみたことがあって、写真をじっくり見てもわかりますがその時気づいたんですが、日本語は、行が10行、列が5列なので、行入力には左右両側に入力項目が並んでいて、列入力には同じ値のものが左右両方に同じ値が並んでいます。
なので文字によって、最初に押す行の側で列も入力できるようになっています。ここは最初は少し戸惑うかもしれないけど慣れてしまえば使いやすそう。
もちろんこれでPC使って制作に使う用途にはむいてないので、ブラウジングなどで必要最低限、文字入力が必要な人への入力デバイスとしては面白いんじゃないでしょうか。
マウス
iTunes Storeが先日リニューアルしました。
HTMLベースになり、以前よりもだいぶすっきり&まともなデザインになったと思います。
びっくりしたのが横スクロール対応。

以前はこんなのでした。

大胆だなーとしばらくアホみたいに眺めていたのですが、少しおいてMagic Mouseが発売されて合点した次第。
デバイス的に縦スクロール/横スクロールが等価的に扱えるので、横スクロールを疎ましく扱う必要がない、と。
なるほど。と思ったのですが、実はその前のMighty Mouseでも横スクロールは対応されていた。
すべてのiTunes Storeユーザーがアップル製マウスを使う訳ではないので、先取りするならサービスの主戦場たるiTunes Storeでやるよりもアップルのサイトなどでやればいいのではと思いましたが。ホイールつきマウスは一般的に縦スクロールのみ対応、のちに横スクロール対応のものも出てきました。これは縦スクロール用のホイールを横に倒すという若干力技な仕様。
一般的にディスプレイモニタは横に長いので、デバイスの普及具合によって、今後はウェブサイトでの横スクロール対応の仕方が変わってくるのかもしれません。
ディスプレイ
愛用中のNECのLCDモニタ(MultiSync LCD2690WUXi2)これはWUXGAなんですけど、縦置きでも使えるので買ってみたのですが、縦に置くと横幅が1200pxになってしまい、狭く感じてしまうというオチ。
ウェブをブラウジングするだけ使う分にはあまり問題ない感じでしたけど、Photoshopで使うとフォントリストが豪快なことだけは確か。

ネットで選挙活動/投票できるようになることの本質って?

ネットで選挙活動ができるようになったり、実際にネットで投票ができるようになったりした場合の目指すべき本質は、よくいわれる無党派層/無関心層の票の掘り起こしにとどまらず、その先にある、選挙制度の全国区制(地域にとらわれない言い方をすれば直接投票)への移行なのではないかと思います。
参議院はともかく衆議院は特に、そもそも国政に参加する政治家を選ぶのに、地域に候補者を紐付けてしまう所がすっきりしないんですよね。
ウィキペディアなので正確かわかりませんが、昔(1947年から1980年)は衆議院選挙で全国区制が行われていたのですね。ネットがない時代には、選挙活動の範囲が全国に及ぶので選挙費用が膨大にかかったようですが、これはネットで選挙活動や投票ができればかかるコストやあり方がだいぶ変わってくるのではないでしょうか。
(衆議院でいうと小選挙区比例代表並立制から)全国区制へ移行するメリットとして思いつくものをあげますと、

政党でなく政治家個人単位で支持を表明できるようになる。

いわゆる1票の格差が全くなくなる。

候補者と地域の利益が結びつきづらくなる。

出馬する地域によって競争率が異なる現状が解消される。

一方で選挙活動が地域に紐づかないので、町中を街宣車で騒音をまきちらしながら名前を連呼して走り回る必要がなくなり、演説する場所は効率を重視すれば人が集まる場所に収束していき、政策の訴求は全国を対象とするのであればネットや他のメディアが中心になり、有権者は「Yahoo!みんなの政治」のような人名ディレクトリに掲載されている、経験した役職や実績のリストやマニフェストなどを参照して判断し、自分の支持する政治家へ貴重な一票を投じることができる、と。
仕組みだけで考えると総理大臣も直接投票できてしまうかもしれませんが、まずは国会議員だけでも直接投票できるようになってほしいですね。
政治家にとっても政局よりもちゃんと実績を残す方にインセンティブ的なものを感じるようになるんじゃないか、そうなってほしいという率直な思いです。あきらかにこっちの方が風通しがよさそうに思うのですけどねー。素人の一意見でした。

Yahoo!ショッピングの購入遷移

Yahoo!ショッピングはよく出来ていて、上記ダイアグラムはショッピングカートに入れた商品をユーザーが購入するまでのページごとの入力情報を、それぞれ上から下へ画面表示順にまとめたものですが、まずYahoo!ショッピングは、色んな店舗の集合体なので、店舗ごとにサポートしている決済手段/配送方法が異なっており、よって店舗ごとにショッピングカートが異るのでそれを選ぶところから始まるのですが、その後は上記step 1 からユーザータスクがスタートします。
ユーザーが滅多に変更することのないアカウント情報に紐づいている入力情報はstep 2にまとめられており、それ以外の、その時の買い物固有の入力情報はstep 1にまとめられています。
注文完了までたった3画面で端的にまとめられていますが、注文内容の表示位置にもこだわっているのが見受けられます。
step 1ではユーザーが注文しようとしている直後ですから、何を注文しているのかがわかるよう一番上に配置。step 2ではそのプライオリティは下がります。一番下ではなく、一番下にはメールアドレス入力欄があるのがちょっと不思議ですが、これは後述する通りリニューアル以前の名残りかもしれないですね。そしてstep 3では、もう注文完了直前の確認画面ですから再び注文内容の表示位置が一番上にきています。
といった感じで隅々まで考えつくされているのに。ああ。

step 3の注文内容確認画面で突然登場するメール送信のチェックボックス。初期状態ですべてオンになっています。
一番下までスクロールして確認しないユーザーは、気づかぬうちにメール送信に合意しているという訳です。
楽天市場が同じ仕様で有名ですが、楽天はある意味潔く以前から一貫してこの状態なのに対し、記憶が正しければ、以前2006年暮れごろに調べた時には、Yahoo!ショッピングは注文内容確認より前の画面、メールアドレスを入力する箇所でメール送信についても尋ねてきていたはず(初期状態でオンだったかまでは記憶にないのですが)。2007年11月29日のリニューアルで今の状態に改変されたのでしょうかね。
言わずもがなですが、一般的にこういった一連のタスクが複数ページにまたがって行われ、最後の一歩手前で入力内容を確認させる際に、その画面で初めて新しい要素を登場させることはユーザーに対する裏切り行為に近いものがありますが、さらにその内容がメール送信に合意という、買い物終えてしばらくして、関連性があやふやになっている頃にショップ側からのアクションとして届くのであんまりよろしくないかと思います。

Greasemonkey 用スクリプト – Deny Rakuten News

「直感的」実は「慣用的」

「デザイニング・インターフェイス」という書籍でこんな記述があります。
「直感的」という言葉は若干誤解を招きやすい。かつてジェフ・ラスキンは、われわれがソフトウェアの利用に関して「直感的」だと言う場合、実は「慣用的」だということを言わんとしているのだと指摘した。コンピュータの「マウス」は、それを一度も見たことがない人にとっては直感的ではない。
マッキントッシュに始まり、iPod、iPhoneへ連なるアップル製品を使いこなすユーザーが「直感的」ですばらしいと感じる時の「直感的」というのは実は「慣用的」ではないのか。
iPhoneのマルチモーダルでジェスチャーによる操作方法は、何も説明がない状態では、操作しようがないのではないだろうか(森公美子氏の例をひくまでもなく)。
横方向ジェスチャーのページング、縦方向ジェスチャーのスクロール、ともにPC上のUIでは必要な視覚的なナビゲーションのヒントが、iPhoneにはほとんどありません。ただ、一度ユーザーが操作方法を理解した後は操作方法が圧倒的に「直感的」で楽しいものとなっています。

一覧リストにおけるページングについて

これです。一番わかりやすいのがグーグルなどの検索サイトの検索結果ページに使用されるこんなナビゲーション(ページング)について書きます。
なぜページングなんてものを取り上げるのか
広く普及している割にはワーディングが揺れていたり、何を「ページング」と呼べるかが少し変化していると感じる部分と相変わらず変わっていない部分と両方を感じるからです。
定義
ここでいうページングとは以下の場合を指すものとします。

ウェブにおいて、閲覧している画面解像度に対して一覧リストがある程度以上長くなってしまう場合に、閲覧上の負荷を下げる目的で複数ページに分割して表示する見せ方やそのナビゲーションのこと

また以下の場合を除くものとします。

一つの記事が画面サイズ長い場合に、編集的視点でページを複数に分割している場合のナビゲーション
一つのタスクが複数ページにわかれている場合(ショッピングサイトの購入フローなど)のナビゲーション

ちょっとわかりづらいかもしれないんですが、これらは分けて考える必要があると思います。除くものとしてリストしたものは、どちらかというとシーケンシャル(連続)型で、一つのコンテンツが便宜上複数ページに分かれているというものですね。並び順に意味があり、意味でページ分割されている。
ここで取り上げたいのは、いわゆる一覧リストがソートされて、文脈的ではなく機械的に複数ページへ分割されている場合のナビゲーションを対象としてみます。
ワーディング
ポピュラーに使われている割にはワーディングに揺れ幅があります。ページング(Paging)、ページネーション(Pagination)、ページャー(Pager)の3つに集約できるかと思います。UIをテーマにしている主要サイトでどういうワーディングや定義(定義がないものは問題点として記載されている内容)をしているか、リストしてみました。
ページング(Paging)

ソシオメディアの定義
一連の情報が複数ページにまたがる場合、ページを送るためのリンクを表示する。

Welie.comの定義
Users need to browse through a large list of items looking for the item that interests them most.

blink design libraryの定義
most web-based systems seem to bump into performance limits that prevent implementing infinite scrolling. And so some amount of paging navigation is usually required.

ページネーション(Pagination)

UI Patternsの定義
The user needs to view a subset of sorted data that is [...]

next page »

about

ウェブ・デザイナー/インターフェイスデザイナー。詳細は下記をご覧ください。

follow us

search

related link

Admin