What a attractive Palm pre is !! Palm preって魅力的！！

先日発売されたPalm preだけど、見れば見るほど魅力が増していってほしいなぁと思う今日この頃。初めは全く興味なかったんですけどね。

Palm preの魅力はなんといってもこの２つ。

• マルチタスク　おなじみタスクを同時にこなせる機能
• Palm Synergy　Facebook、Gmail、AIMなど、毛色の異なるサイトにスムーズに同時アクセスし、そこからコンタクトリストを、ダブることなく自動でリスト表示してくれたり、メールも、IMも、SMSも、すべて同じウィンドウで見やすく並べてくれる機能

おまけであと３つ。

• iTunesとの同期（DRMフリーに限るみたい）
• wireless charger（ちょー便利ですねー。家の中に3つぐらいほしい。でもSyncはしてくれないんだよねぇ。）
• Flash対応（今はまだですが、もうすぐ出来るみたい）

詳しい機能はGizmodeのレビュー記事をどーぞ。

僕が使っているのはipod touchですが、UIとUXではこれを超えるものはでないかなと正直思っていましたが、後発だけあってやることやってきましたね。iphoneは確かにすばらしい端末だけど、実際にビジネスレベルで利用してみるとかなり使い勝手が悪いことに気づきます。それはやっぱりマルチタスクが実現出来ていないことが原因です。


プライベートユースでは、比較的単一のアプリケーション利用だけで済むことが多いのですが、ビジネスユースになると、アプリケーション、ブラウザベースに限らず、複数のアプリケーション間を短時間で移動して作業を行うことがほとんどだからです。

この点でiphoneとPalm preはUCDのベースであるペルソナの設計において、そのペルソナに差があることが分かります。
iphoneは一部マルチタスクな機能も持っていますが、そのマルチタスクベースは音楽を聴きながら何かをするというレベルでの設定です。音楽の場合は、一度設定してしまえばそんなに頻繁に切り替えることもありません。そういう面からペルソナは10代や20代前半を含むプライベートの充実を目的とするペルソナなんじゃないでしょうか？

一方でPalm preは20代中盤から30代のビジネスマンで、Social networkをプライベートとビジネスに活用しながら多忙な日常を効率的に楽しんでいるというペルソナを想像してしまいます。確かに先に出したiphoneにハード的な制約が多かったことは確かだと思いますが、ちょうど同時期にリリースした最新のiphoneでもそのあたりの強化がなされていなかったことは面白いポイントだと思います。逆にPalm preはそこだけは譲れないと強化したポイントだったんでしょうけど。

この両者の関係は、僕が感じてるMacとWindowsの関係に近いかも。僕は今プライベートでMacを使ってますが、これまではWindows派でした。まあ今ほどWebアプリケーションが使える環境でなかったので、ローカルアプリケーションの互換性がその理由でしたけど、今Macを使っていて思うのはマルチタスクをとっても有効に使えてると言うことです。Windowsももちろんマルチタスクですが、OSXのExposeとSpacesを使うと、もうWindowsには戻れないですねぇ。13インチのMacbookを使っていますが、以前使っていたWindowsのラップトップの時と仕事のスピード、活用度合いがまるで違います。同じタスクをこなしてもWindowsなら17インチは欲しくなる。この違いがiphoneとPalm preでも言えるんじゃないかな。



iphoneを買う気でいたんですけど、それもうあきらめてipod touchで我慢するかなって感じになってます。既に。
あーシンガポールでも発売してるのかな？でもこっちで買うと日本で使えないしなぁ。なんとも悩ましい限りです。でもiphoneもOSXベースなはずだから、ExposeやSpacesが使えるようになればいいのになぁ。

Screen menu - Yahoo image search

Yahoo(US)の画像検索機能がちょっと前に変わり、検索結果をクリックした時の画面の画像が表示されているフレームが画面の半分を占めるぐらいに大きくなり画像が見やすくなりました。また、その画面上にその他の検索結果が複数表示されるので、検索結果ページに戻ることなく検索することも出来ます。Googleのimage検索はよく使いますが、画像が小さくて見づらいことや、毎回検索結果に戻って次の画像を選ぶという手間があるので上手く改善されているなという印象です。


ただ、今回注目したのはそちらではなく（まあ、ちょっと関係ありますが）、Yahooの画像検索のオプション検索機能の表示方法です。他のサイトでも増えてきていますが、最近の傾向として、その時に必要な機能を大きなスペースをアニメーションで展開して表示するというのが流行のようです。

僕自身はこのメニュー展開が個人的にとても好きです。これまでであれば、ドロップダウンメニューを使用したり、メニュー項目が多いと別ページへ遷移するというパターンでしたが、Ajaxなどが多用されるようになり、メニューの開閉がアニメーションし、必要な機能がその場で大きく表示されることで、ページ遷移が無く自分の位置を見失うことがありませんし、かつてのドロップダウンのようにちょっとマウスがずれるとメニューが消えたり、違うページに移動したりなんていう心配も無くなりました。以前書いたメガドロップダウンとユーザビリティ上の効果は同じようです。Yahoo(US)とGoogleのフィルタリング機能を使ってみるとYahooの方が使いやすいなと感じます。

また、大きく展開することで以下のようなメリットが考えられます。

1. メニュー項目が一覧出来、比較して選択出来る
2. ドロップダウン選択(google)からチェックボタン選択(Yahoo)へ変わることで、オプションが複数選択可能になる
3. 文字入力が可能になる（Yahooの画像サイズ入力参照）

ただ、この展開メニューを利用するにあたり、メニューを展開させるきっかけとなるボタンやリンクをどう表現するかに注意が必要そうです。フィルターメニューのMore filtersというテキストリンクは分かりやすいのですが、Yahoo(US)の検索窓下の矢印がついたボタンはいい表現だと思うのですが、機能を知らない一般のユーザーが気づきそうにありません。まあ通常は検索窓へテキスト入力した際に展開する部分ですから、あまり目立っても駄目ですし、随分考えた結果なんだろうなという感じはします。

これまでの展開メニューで使われてきた右向きの三角が下向きになる（→が↓）ような標準化が出てくるでしょうか。僕はこのメニューの展開方法がスクリーン（プロジェクターなどを映すやつ）に似ているので、取っ手の様なボタン？が良さそうですが、それだとYahooと同じ感じですね。ぜひ次つくるサイトで使ってみたいなぁ。

Bar type menu

最近ソーシャルサービスで見られるようになったのがBarタイプのナビゲーションです。これまでのヘッダ位置のグローバルナビゲーションなどとの違いは明らかで、既存サイトへの付加機能としているため、既存サイトのデザインに影響することなく表示出来る方法として採用されています。

最近話題のサービスでBarメニューを採用しているのが、Google friend connect(GFC)のSoclial barと、Digg barです。
Digg barはURLの短縮やらでいろいろ問題になっていましたが、機能を実用的に上手くまとめた印象を持っています。面白いのはGoogle Friend Connectの変遷です。はじめに出たときはカラムに設置するタイプでしたが、よりソーシャルツールとしてサイトコンテンツとユーザを結びつけるためBarタイプへと進化しました。


ただ、これらのメニューはあくまで現サイトへの後付けの機能となるため、UIおよびUsabilityに問題が生じてしまうのも否めません。
まずはサイトとデザインが一体化しづらいため、ページの機能として操作するということに違和感があります。Diggの場合は、どちらかというとYahooツールバーやGoogleツールバーといったブラウザ機能に近い使い方だったりしますし、デザイン的にもサイト側というよりブラウザ側に属するようにみえるので比較的違和感がありませんが、GFCはサイトコンテンツに関連が強いにもかかわらず、デザイン的にも機能的にも違和感を感じてしまいます。
特にUsability的には、GFCはドロップダウン時にドロップダウンメニュー以外をクリックしても、ドロップダウンが閉じないなど、操作していても違和感があります。



今でもブラウザのプラグインや標準パッケージ的にYahooバーなどが追加されているものがあり、また、タブが主流になったことでブラウザのメニューエリア自体が かなり高さが増している状態なので、こういった機能でどんどんサイトの頭が重くなっていくのはちょっと考え物ですね。（GFCはフッタにもつけられますが）そういう意味で はGFCはヘッダがタブしかないClomeとの相性を考えて作られたのかもしれませんね。

ただ、これらのサービスが増えるに従い付加型でないサービスにもBarタイプのナビゲーションが使われ始めているようです。以前にも紹介したWordpressのBuddy pressがそうですね。今後もこのスタイルのナビゲーションは増えそうです。
ただ、どうせならMicrosoftのOfficeで採用されているリボン型メニューのいい点を取り入れてもっと幅を広げてしまいサイト内メニューを全て取り込むぐらいでもいいかもしれませんね。

Digg barの詳しい情報はこちらを参照ください。
ITメディア：Digg、参照URLを短縮できる「DiggBar」を公開

Google Friend Connectの参考サイトはこちらをどうぞ。
http://www.ossamples.com/freestyle/
http://www.ossamples.com/socialmussie/music.htm

Good CSS Format gurdian.co.uk

いろんなニュースサイトを見ていますが、最近見た中で一番フォーマットが見やすいと感じたサイトです。

gurdian.co.uk

レイアウトもそうですが、何よりテキストのフォーマットがいいですね。文字量があるサイトながら、シンプルなレイアウト設計とスタイルで一目で各コンテンツブロックが分かり、見だしがまず目に入ってきます。結構英文のニュースサイトはぱっと見でうんざりするサイトが多いのですが、このサイトは文字サイズとカラー設定が上手く、文字を楽しく読めるサイトですね。

CNNやBBC,Newsweekなどと比較して気づいたポイントを見てみようと思います。

まず英文サイトにしては本文の文字サイズが大きめで読みやすい。CNNやNewsweekは記事本文の文字サイズがかなり小さく読みづらい印象を受けます。

次に見出しと本文、リンクなど各文字サイズのメリハリが上手く、まずポイントとなる見出しなどが目に入り、その後本文に移動するという視線の流れを上手く作れています。また、各カラム毎の文字サイズやサブコンテンツなども文字サイズがプライオリティにあわせて設定しており、文字が多くてもそれが読むときに邪魔にならず、付加情報として機能しています。他のサイトでは、サブカラムやサブコンテンツの文字サイズがメインコンテンツと同じだったり、より大きかったりするため、視線が集中出来ずあちこちに目がいってしまいます。

そして文字サイズを上手くサポートするスペースとライン（仕切り線）とカラーの使い方に注目です。Newsweekはキャラクター的にも派手な紙面なのでかなりトーンは違いますが、グラフィックパーツを多用しており、各コンテンツを枠で囲むなどの処理で画面全体がうるさい印象を受けてしまいます。BBCなどは比較的gurdianと近い印象なのですが、スペースとラインの使い方がguradianの方が一歩上という印象ですね。特に画面下部に行くほどBBCはコンテンツが整理されていない印象を受けます。

最後にカラーナビゲーションが上手く機能していますね。ニュースサイトはよくどこにいるか迷子になるケースが多いのですが、グローバルメニューとローカルメニューと各見出しの色がナビゲーションとしての役割を果たしつつ、コンテンツを移動したときにフレッシュな印象を与えて読むのを飽きさせません。

ちなみに、英語だからよく見えるんじゃないの？という意見もあるかなと思い、Google translationで日本語訳してみたところ、日本語でもいいですよ。これは僕自身もびっくりでしたが。しっかりした設計がなされていれば言語は関係無いんですね。一度試してみてください。

厳しく見ればカラーナビゲーションや一部グレーに白抜き文字などはアクセシビリティ的に調整が必要なところもあるのでしょうが、ぜひ参考にしたいサイトです。

Mega Drop-Down Navigation Menus Work Well メガ・ドロップダウンメニューはいい感じ

以前に書いた検索候補提案機能と関連するドロップダウンメニューに関する記事がJakob Nielsenのサイト（Alertbox）にあったのでご紹介します。

うちの会社では結構昔からグローバルメニューのドロップダウンメニューが悪とされてきました。（ここでいうドロップダウンメニューはナビゲーション利用時です）これはSEOやアクセシビリティ的な考え方に加え、うちの会社の代表がプルダウンは古い、ダサい、使いづらいという意見を持っているという理由があるのですが。
ただ、僕自身はドロップダウンメニューによるメニュー設計はあまり行いませんが、ユーザとしては結構好きです。確かに5年ほど前までは何でもかんでもプルダウンメニューになっているサイトが多く、ブラウザによって崩れが起きたり、ラべリングとサイト設計がいい加減で、結果ドロップダウンを利用することでメニューを隠してしまったりするなど使いづらくなっているケースが多かったのは確かです。実際、5年以上前に構築された公共のサイトやイントラサイトなどのリニューアル依頼を受けるとほとんどがプルダウンをこれでもかと使っているサイトが多いです。ただ、最近はサイトの規模が拡大していることによる必然性と、Javascriptが認められたことなどから利用されるプルダウンメニューも使いやすく、いいものが結構あると思っています。

で、そんな中Jakob NielsenがMega Drop Down Menuは結構イケてるという記事を書いていたのを見つけ、ユーザビリティの観点からもドロップダウンメニューが評価されたようなので、彼のアドバイスを参考にしながら今後のプロジェクトに取り入れたいなと思っています。

まず、前提としてJakob Nielsenはこれまで結構ドロップダウンについて記事を書いていますが、どれも悪い評価としての記事が多かったのが事実です。そのため使う時の注意点とあまり頻繁に使わないようにという警告が多かったと思います。まあそういう経緯もあったので今回の記事はちょっと驚きもあったのですが。

さて、今回彼がMega Drop Down Menuとして定義しているのは以下の要素を含んだドロップダウンメニューです。

• 大きく、ナビゲーションパネルの中がグループ分けされている
• レイアウトやタイポグラフィー、アイコンなどを使って構造化されている
• すべてのメニュー内容が一度で見れる（スクロールしない）
• トップメニューから水平もしくは垂直表示される。左カラムのメニューの場合はパネルが表示されずページへ移動する（ちょっとここの訳は怪しいです）

参考サイトが2つ掲載されていたので見てみてください。（なお仕様にあたっての注意点などはAlertboxをご覧ください）

Food Network


Action Envelope


彼の定義している内容は検索候補提案メニューの内容とほぼ一致しますね。まあ、あちらもドロップダウンメニューと言えるのでもちろんそうなのでしょうが。ただ、これまで単純なリストとしてしか表現していなかったメニューや検索結果などへ、今後の傾向としてグルーピングやレイアウト、タイポグラフィーなどによる視覚的な設計とデザインが必要になっていくのは必須ですね。ただし、検索候補提案メニューの記事で僕が感じたメニューか広告か分からない？という表現と、やはりAction EnvelopeやAppleのメニューはちょっと回線的に表示に時間がかなりかかってしまうので、そういった点には注意が必要でしょう。

ちなみにドロップダウンメニューに関する基本的な注意点はAlertboxにいくつか記事があるのでご参考まで。

Drop-Down Menus: Use Sparingly

Does User Annoyance Matter?

Suggest Search Feature 検索候補提案機能

今では結構多くのサイトで実装されている検索候補提案機能（硬いな。。）ですが、最近リニューアルしたMOGで検索したところ、お、、惜しいと感じたのでユーザビリティの観点からAppleと比較してみました。


MOGの検索候補自体は結構いい感じなんですよ。検索候補が"Artist" "Album" "Track"それぞれにグルーピングされて分かりやすいんです。
で、何が惜しいかというと。

1. リストが必然的に長くなるのでプルダウンにスライドバーがついちゃうので、Trackがファーストビューで見えないことが多い。
2. 検索窓からカーソルの下でプルダウンリスト内に移動出来ない。
   

1はまあ仕方ないかなという感じだけど、2は結構いただけない。検索時はキーボード使ってますよね。そこからマウスに持ち替えるっていうのが面倒で。たったこれだけなのに随分とユーザビリティーが落ちてる気がします。

ちなみにそこはさすがApple使いやすい。ちゃんとカーソルキーでプルダウン内に移動しますね。


ただ個人的な感想ですが、アイコンやらなんやらデカ過ぎて検索結果というより広告に見えてクリックしたくない・・。僕だけですかね。

ちなみに検索候補提案機能といえば元Googleのアーキテクトなどが作ったCuilですが（？）、最近はめっきり話題にならないような。スタート直後は結構叩かれてましたが、検索結果表示方法などはいい感じなんですがね。

Search feature of Sun Microsystems サンの検索機能

Googleを使った使いやすい検索機能を見つけました。USのSun Microsystems（サン・マイクロシステムズ）のサイトです。商品やサービスを大量を大量に持っている大手メーカーやベンダーなどにはお勧めなスタイルです。フリーキーワードで検索後、フィルターで各ジャンルごとに絞り込みができます。また、キーワードがサービスページにヒットすれば最上段にフォーカスリンクが表示されるなどの心配りもいい感じです。

I've found the nice search features with google search engine. It's a Sun Microsysytems U.S. one. I think it suite for companies which have lots of services or products. You can search topics by free words then you can focus topics by filter.


ちなみに、拡張検索のレイアウトもわかりやすい。
Extention search function is good too.


あと、ここのサイトにはFeedback機能があってその内容も面白いので。


でも、今回一番面白いのは、同じSun microsystemsのSingaporeとJapanのサイトを見てみたところ、同じGoogleを使っているのに表現方法が違うんですよね。
シンガポールはデフォルトのまんまって感じですが、日本はフィルタリングという発想はUSと近いんですが、見やすさと使い勝手で随分差があるような気がします。同じ会社でSunのようにレベルの高いエンジニアがいる会社でこうも違いが出るとは。僕は明らかにUSが使いやすいと思うんですが皆さんはどうでしょう？

It's very interesting that Sun Micro Japan and Sun Micro Singapore use same google search engine, but their features are different from U.S. one. I think U.S. one is best. Japanese one is little similar in U.S. one but U.S. one is quite easy to understand and to use. Singapore one is default style I think. It's interesting that engineers who work same company make same function with same software but they are very different.

Sun microsystems Singapore

Sun Microsystems Japan


仕事では検索はGoogle miniやGoogle custom searhばかり使っているんですが、そのままデフォルトで実装することが多く、今回みたいに同じGoogleでもなるほどと思える検索の設計はぜひ真似 てみたいですね。
情報アーキテクチャの4つの要素のうち1つは検索システムなんですよね。ここをちゃんとやっておけば本体の設計が甘くてもつぶしがきく・・・いかんいかん。ここもちゃんとやらないとね。