Tagged

UI

A collection of 74 posts

UI

マルチデバイスUI設計で注目したい5つの要素

2011年 UI/UX トレンド [http://www.yasuhisa.com/could/article/ui-ux-2011-trends/] という記事で、モバイルWebデザインのノウハウがデスクトップにも影響し始めているという指摘をしました。Mac OSX Lion [http://www.apple.com/jp/macosx/] や Windows 8 のような OS だけでなく、Web サイトにも変化が見られています。スクリーンの大きさを活用してモバイル環境では再現が難しいダイナミックで動きが多いレイアウトも出て来ている一方、モバイルアプリの血を受け継いだかのような目的にフォーカスしやすく、目的までのステップと選択肢が少ない Web サイト / アプリケーションも次々と出て来ています。 Windows Phone 7 をそのまま受け継いだかのような Windows 8 の UI今後デスクトップOS がモバイルOSのようになり、利用者がシンプルな操作と体験を求めやすい環境になれば、Web サイトも次第にシンプルになる可能性がありますし、そうしなければならない状況も出て

UI

2011年 UI / UX トレンド

2011年の1月。まだ年が始まったばかりでしたが、今年の Web デザイントレンド [http://webdesignledger.com/tips/web-design-trends-in-2011] という記事が発表されたりしていました。その後、数々のトレンド記事が国内外で数多く紹介されていますが、ルック&フィールに関する話題、又は技術的な側面から見た話題が多くを占めています。こうしたトレンドを知ることは重要ですが、トレンドの全体像として捉えるには多少偏っていると思います。そこで今記事では、UI / UX デザインの側面からみた 2011 年のトレンドを幾つか紹介していきます。 To Do アプリ Flow [http://www.getflow.com/] は、まるでデスクトップ向けの Mac アプリを使っているかのような UI デザインを Web 上で再現しています。この記事で挙げる幾つかのトレンドが現れるキッカケを作ったのは、テクノロジーと Web が今まで以上に強い連携が可能になったからです。デスクトップ(又はオフライン)アプリケーションと同等の能力を Web で実現出来

UI

GIMPが提案するソーシャルUI

着実に機能を増やし続けているオープンソースの Photoshop [https://www.amazon.co.jp/dp/B003F783CW/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B003F783CW&adid=06T97V7BAYT1H3AXJMQD&] 代替プログラム GIMP [http://www.gimp.org/]。他アプリケーションとの連携を考えると Adobe 製品で揃えた方が有利ですが、機能だけみると Photoshop のライバルと見なしても良いくらい充実しています。GIMPは Photoshop と同様、プラグインやアクションが共有されている [http://registry.

UI

ジェスチャーUIの課題と対策

タブレットやスマートフォンで積極的に導入されているマルチタッチテクノロジー。デジタルなオブジェクトに触れているような感覚が味わえるタッチインターフェイスは、抽象的なマウス操作に比べて直感的だと言われています。スクリーンに触れるだけの動作は直感的で簡単そうですが、これにジェスチャーが加わることで突然ややこしくなる場合があります。感覚的・直感的というよりかは、操作を覚えなくてはならない負荷がかかる可能性もあります。 未来のインターフェイスを語る上でよく出て来るのが映画『マイノリティ・リポート [https://www.amazon.co.jp/dp/B00006CTJN/ref=as_li_ss_til?tag=could-22&camp=1027&creative=7407&linkCode=as4&creativeASIN=B00006CTJN&adid=14NPG0DWDPFKW1YA2AQA&] 』。この映画に登場するマルチタッチ UI の技術は一般化されつつあるといっても過言ではありませんが、大きく腕を振りかざし、長時間立ち続けなければならないのであれば、すぐに疲れてしまいそう

IA

パン屑リストについてもう一度考えてみる

様々なパン屑リスト 利用者が辿ってきた道筋を示し、いつでも先に戻れるような配慮としてパン屑リスト [http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88] があります。IA の専門家 Keith Instone [http://instone.org/] によると、パン屑リストには以下のタイプがあると言われています。 場所の示すWebサイトをツリー状として捉えたときの利用者の現在地を表示する経路を示す利用者が現在地まで辿り着いた道筋を表示する属性を示す 断面的な検索をして絞り込む際、選択済みの属性を表示する進行状況を示すアプリケーションの利用の際、タスクの進行状況を表示する それぞれのパン屑リストには特有の機能があり役割を果たして来たわけですが、本当に必要かどうかを再考するべきタイプもあります。例えば経路を示すパン屑の場合、ブラウザで既に実装している「戻る / 履歴」と重複しています。

UI

読書体験を共有するためのデザイン提案

ページ上に読者の感想や、ディスカッション、そして読まれている文章の傾向が分かるというのは電子書籍のひとつの読み方としておもしろいと思います。しかし、それは様々ある読書スタイルのほんの一部にマッチした提案です。読書は基本的に『一人旅』に近いと感じています。読書という旅の経験を人と共有することはあると思いますが、それは読書する前後であって読書している最中に思いを共有することはさほどないような気がしています。読んでいる瞬間に生まれる読者と作者 (書籍) の一対一の関係が読書をまた特別なものにしていますし、そのときの体験を共有する楽しさはあると思います。 読書を一人旅と例えるのであれば、読書の最中の演出・機能はむしろ邪魔な存在かもしれませんし、それだけが電子書籍の魅力だとすると今の読書の体験とズレているのではないでしょうか。 ノンフィクションやハウツー本だと同時に他の読者の様子が分かるというのは有効かもしれませんが、一人旅としての読書を補助することができる電子書籍のあり方もあったも良いのではと考えています。 > カフェで友達に会ったとき本の話題が出て「あぁこれだよ、読んでみなよ」ってデバ

UI

インターフェイスとしてテキストをみたときに考慮すること

サービス、製品の解説するためにマニュアルやスクリーンキャストを作ることがあります。しかし、利用者はのんびり説明に耳を傾ける余裕がないときもあるわけですから、使っているうちに覚えてもらえるようなユーザーインターフェイスを必要とします。Webサイトをはじめ様々なシーンでいえることですが、すべてのアクションはテキストから始まっています。それゆえ、見た目を考える前にテキストでどのように簡潔に説明できるかを模索する必要があります。 例えば Twitter [http://twitter.com/yhassy] をみてみましょう。機能が少ないシンプルなサイトですが、UI 要素をすべて省いてしまうと状況が大きく変貌します。タイムラインを読むことは可能ですが、返信がしたい、設定を変えたいといったアクションを起こすことが出来なくなります。テキストは私たちが何かしたいときの道案内をしているということがテキストを省いてみることで改めて気付かされます。アイコンで補助できる部分はありますが、テキストがないことで意味を大きく失うわけです。 インターフェイスをデザインする際に、考えなければならないことは幾つかあ

UI

メタファーが作り出す期待値と使いやすさの関係

Webをはじめとしたテクノロジーを利用したものには、馴染みのない機能や象徴的で捉え難いアイデアがあります。それらをスクリーンショットで見せたり、分かりやすい解説があったとしても伝わらない場合が多いです。そこで、他にある似たようなものと関連付けさせて理解しやすくします。これを私たちは「 メタファー」と呼びます。 メタファーはパソコンの中にたくさん見ることが出来ます。アイコンデザインがその代表格です。絵としてフォルダを表現することで、頭の中で「幾つかの書類をまとめることが出来る」という本物のフォルダと関連付けがしやすくなり、操作を促すことが出来ます。 フロッピーディスクアイコン (保存) [http://www.yasuhisa.com/could/article/meaning-of-save/] のようにメタファーからシンボルへと進化した例外もありますが、機能やインタラクションを説明せずに利用者に伝えることが出来るメタファーは、アプリケーションデザインやWebデザインでよく使われます。 メタファーが作り出す「使い難い」 ユーザビリティを向上させることが出来るメタファーですが、何

UI

ブラウジング型インターフェイスの長所・短所

検索は Web が使われるようになってから続く永遠の課題。技術だけでなく検索結果の見せ方も年々進化してきています。近年、セマンティック Web [http://www.yasuhisa.com/could/diary/cybergarden-semanticweb/] への注目が一層高まっていることから、また検索がおもしろくなりそうな気配です。検索の精度、そして結果を利用者に示すためのインターフェイスへの探求はこれからも続きますし、デザイナーとして興味深い話題のひとつ。 検索(特に検索結果)と少し関係があるデザインパターンのひとつにブラウジング(Browsing)があります。多くの情報を次々を観覧するのに長けているわけですが、最近ブラウジングを採用したサービスや Web サイトをよく見かけるようになりました。 Google Fast Flip [http://fastflip.googlelabs.com/] ニュースサイトをページをめくるような感覚で次々と見ることが出来ます。キーボード操作で次々とページを移動。ローディング時間も含めサクサクCooliris [http://ww