Archive for the ‘ui’ tag
Gadgets & Widgets UI Guidelines
Consistencyというエントリーを読んだところで、UIパーツとしてガジェットないしウィジェットのガイドライン系をまとめたものがほしいと思ったので、いろいろ探して整理してみた。
Google Wave
iGoogle
Google Desktop
Windows Desktop
Windows Sidebar
Yahoo!
- Konfabulator 4.5 Reference Manual – Yahoo! Widgets
- Konfabulator Tools and Documentation – Yahoo! Widgets
- Yahoo!ウィジェット – 開発ツール
Apple (Dashbord)
- Mac Dev Center: Dashboard Programming Topics: Designing Widgets
- Dashboard Programming Topics – ウィジェットのデザイン
iPhone Human Interface Guidelines
Android
Opera
IA Cocktail Hour Tokyo – 9 October 2008
10月に入りましたが、今週の木曜日に「IAカクテルアワー」を開催します。
前回のIAカクテルアワーでもご紹介した「ジェスチャーUI (タッチレスパネル)」のデモをノルウェーのElliptic Labs社の方々に実演してもらうということになりました。
興味ある方はご参加ください。
内容：ノルウェーのElliptics Labs社のタッチレス（ジェスチャー）UIの技術デモ
（※デモは英語で行われます）
日時：10/9（木） 20:00～22:00
場所：（株）ビジネス・アーキテクツ 会議室
会費：3,500円程度（※人数により調整）
主催：IAI-JP、IAAJ
協力：（株）ビジネス・アーキテクツ
参加希望の方は、佐藤さんもしくはmixiのIA研コミュのイベントからお願いします。
下記のような技術ですので、個人的にもかなり興味あります。
Carousel
最近よく目にする、いくつかの要素がローテーションするナビゲーションのことですが、「カルーセル」という呼び名があります。
「回転木馬 (?)」という意味ですかね。もちろん「カルーセル麻紀」ではなく (なぞ)。
UIパターン系サイトでも同じように取り上げられているのでご紹介します。
Carrousel – Interaction Design Pattern Library – Welie.com
Carousel Pattern – Yahoo! Design Pattern Library
下記に詳しい説明が載っていました。
Carousel Design Pattern >> Yahoo! User Interface Blog
Use When
Use when the user’s mental model of a topic or of a set of objects is closely tied with imagery, such as a visual representation of the object, and the available screen real estate is too small to accommodate all the items at once.
って、そのままですが……。
ポイントが3つかかれていますね。
- Provide focus
- The Item in focus is clearly selected
- Enable scrolling
- There’s hint of the next item showing
- Dots and arrows provide two scrolling methods
- Plan the item order
カンタンに説明すると、こんな感じですかね。
- オンマウスなどでフォーカスがあたっていることがわかる必要があります。
- また、スクロールができる必要があります。
- スクロールは2種類必要です。
- ドットは枚数や現在位置がわかるもので、矢印は前と次に移動できるものですかね。
Christian Crumlishが、その「Carousel」についてサンプルをFlickrにためているようなので、こちらも紹介しておきます。
Christian Crumlisのブログで、IA SUMMIT 2008の「Pre Conference Workshop」でも下記2つのプログラムで話されていますね。
- Design patterns: from interaction to design to build
- Design and architecture of social web experiences
ということで、ナビゲーションの名前をある程度統一していきたいと思うのですが、以前購入した下記書籍では上記のUIパターン系サイトとは違うので注意…… (なぞ)。
O’Reilly Media | Designing Web Navigation
James Kalbach氏がドイツの人だからか……。
CGUI (Consumer Generated User Interface)
Japan.internet.com Webマーケティング – Yahoo! Widget や Google Sidebar など「CGUI」が2009年度に普及――NRI の IT ロードマップ
http://japan.internet.com/wmnews/20060518/4.html?rss
にありますが、野村総合研究所 (NRI) は05/18 (木)、2010年度までのWeb技術の進展を予測した「IT ロードマップ」を発表したらしい。ということで引用します。
2010年度までのWeb技術の進展を予測した「ITロードマップ」を発表～Web2.0/SOA時代の到来に不可欠なリッチクライアント～
http://www.nri.co.jp/news/2006/060518.html
NRIでは利用者自らがユーザインターフェース（UI）※3を作り、公開することを「CGUI（Consumer Generated User Interface）」と呼んでいます。
CGUIは、サービスの供給側がWeb API※4というインターフェースを公開していることが必要です。例えば、Yahoo!やGoogle、Amazonなどの企業が自社サービスのWeb APIを公開したことに伴って、Yahoo! WidgetやGoogle Sidebarといったリッチクライアント技術を利用したCGUIが利用者によって生み出され続けています。このCGUIは現在、萌芽期を迎えていますが、Web APIを公開する企業が順調に増えていけば、2009年度には普及すると予測されます。
ということで、NRIは「CGM (Consumer Generated Media)」に対し、ユーザー自らがユーザインターフェース (UI) を作り公開することを「CGUI (Consumer Generated User Interface)」と呼んでいるとのこと。
「Widgets & Gadgets」にも書きましたが、Yahoo! やGoogle、Amazonなどの企業が公開するAPI によってCGUIの爆発的な普及が考えられると思いますな。
UIの設計が、Widgets & Gadgets単位になり、それらをトータルで設計する力が必要になってくるんでしょうかね。
F-Shaped Pattern For Reading Web Content
Eyetracking Web Usability: Usability Week 2006 Conference
http://www.nngroup.com/events/tutorials/eyetracking.html
で話された内容「Eyetracking Web Usability」が「Jakob Nielsen’s Alertbox」でまとめられています。
F-Shaped Pattern For Reading Web Content (Jakob Nielsen’s Alertbox)
http://www.useit.com/alertbox/reading_pattern.html
これによると、ユーザーがウェブコンテンツを読むときの視線の動きを「Ｆ字形」であるといっています。
が、少し前にある施設でした「Eyetrack III」のテストだと、複雑な視線であることがレポートしてまとめられているので、どちらも合わせて考えてみると「対象コンテンツ」による影響がかなる受けられると考えられます。
Eyetrack III – What You Most Need to Know
http://poynterextra.org/eyetrack2004/main.htm
「Eyetrack III」の場合だとニュースサイト (複数) が対象ですが、「Jakob Nielsen’s Alertbox」だと3つのサイトを対象にしています。
推測ですが、ECサイトとコーポレートサイトとでも違うでしょうし、ブログやポータルでも結果が違うのでは (?) と疑問が残ります。
そもそも国や文化でも違うでしょうし (これを言ったら終わりだが)。
ということを考えていくと、やはり対象の創作物に対してテストをしてみることが一番確実ということになります。
従来のテキストの扱いについては、日本語も英語圏と同じ左から右に読むことになるので、視点の動きについてはグーテンベルクが提唱していた視覚の拡張についての論理でほぼ解決します。
たとえば、人間の視点の開始位置は左上にあり、右下の方向 (つまり対角線上) に読み進むことになる。
なので、左上には常に目につく情報や読み始める開始点を置くことが必然となり、右下には個別の関連情報や情報の結論やクリッカブル情報を配置することになる。
また、マウス (の動き) を考慮した場合、右利きが大多数と考えると画面右側にポインタを合わせる要素 (つまりクリッカブル要素) を配置することがクリックさせやすいことにつながるとも考えられる。
「Eyetrak IIIの研究結果」により人間の視覚が複雑な動きをすることから、右中段の上あたりにも強調したい要素を配置することが視覚の終着点として有効であると推測できるのだが、ニールセン博士の結果はどこまで考慮に入れればいいのでしょうかね。
Designing Interfaces
Jenifer Tidwell氏が『Designing Interfaces』という書籍を発行したらしい。
About the Book – Designing Interfaces
http://designinginterfaces.com/
内容は下記――
- Information architecture for applications
- Navigation
- Page layout
- Maps, graphs, and tables
- Forms
- Graphic editors
- Color, typography, and look-and-feel
下記ブログにもエントリーがありました。
GUUUI – Designing Interfaces: Patterns for Effective Interaction Design
http://www.guuui.com/posting.php?id=1759
Birth of the Mac interface
Photos: The birth of the Lisa and Mac interface | CNET News.com
http://news.com.com/Photos+The+birth+of+the+Lisa+and+Mac+interface/2009-1041_3-6053877.html
30周年記念コンテンツですかね。
Macintoshのインターフェースの歴史がギャラリーで見ることができます。
Gallery 1: Early fonts, graphics Historic Polaroids chart evolution of the user interface.
http://news.com.com/2009-1041-6054432.html
Gallery 2: Radical shift Soft-key based UI becomes mouse/windows-based.
http://news.com.com/2009-1041-6054436.html
Gallery 3: Lisa desktop Creating double-click, menu bars and more.
http://news.com.com/2009-1041-6054440.html
Gallery 4: Sketching out the Mac Before MacPaint there was LisaGraf.
http://news.com.com/2009-1041-6054444.html
Copywriting is interface design
Getting Real: Copywriting is interface design – Signal vs. Noise (by 37signals)
http://37signals.com/svn/archives2/getting_real_copywriting_is_interface_design.php
「Write good interfaces.」って表現がおもしろいですね。
要は、テクニカルライターが必要だという点を取り上げている (?) のだと思うのですが、IAのタスクとしてもラベリングやコンテンツを考える上でその素養は必要ですよね。
「IAって一言でいうと?」って以前誰かに聞かれたときに、「編集プロダクションです」と答えました。結局いろいろなタスクを1役でこなしている現場が想像できると思います。
ただ、制作現場から言うと「ライター」より「エディター」が必要なんですが。
TUI (Tangible User Interface)
Japan.internet.com Webテクノロジー – 実体を持つ次世代インターフェイス、「Tangible User Interface」
http://japan.internet.com/webtech/20041227/5.html
に興味深い記事があったのでメモ。
ユーザー・インターフェースには、絵のない状態でキーボード操作を行うCUI (Character User Interface)、アイコンなどグラフィカルな画面でドラッグなどの操作を行えるGUI (Graphical User Interface) と進化してきている。今後はTUI (Tangible User Interface) やさまざまなインターフェースが研究・開発されているらしい。
TUI とは実体を持つデバイスに物理的に触れることにより、操作を直感的に知覚できるインターフェイス。TUI は、CUI と GUI によってモニターの中に追いやられてしまった操作感を、もう一度人間の手に還元しようとしている。その原点はそろばんであり、自動車のステアリングなども TUI の一例だ。自動車の場合、ステアリングのきり具合が車の曲がり方にダイレクトに反映し、それが直感的な操作性を実現している。これをいかに IT 分野に応用するか、研究が進められている。
とのこと。
マサチューセッツ工科大学（MIT）の石井裕教授 (つまり日本人) が中心になって進めていることにも注目ですね。やはりこういうものは日本人しか作れないんだろうなとか思いました。
また、NTT コムウェアで研究が進んでおりそのプロジェクトに「Integrated UI」という概念があるようだ。
NTTコムウェア | 研究・開発 | Integrated UI
http://www.nttcom.co.jp/about/research/ui.html
以下のような最先端のユーザインタフェースを、Integrated UIに組み込んでいます。なお、括弧内は適用システムです。
- Tangible User Interface (Tangible IP-NW Designer、Tangible BPA)
- 米国MITの石井先生が創設した「触れて知覚する」ことができるユーザインタフェースです。
- PHANToM (Tangible IP-NW Designer)
- 3D入力が可能な装置であり、フォースフィードバック(手に感触が反映される)可能な装置です。
- 裸眼立体視ディスプレイ (Tangible IP-NW Designer、Tangible BPA)
- 左右の視差を利用し、眼鏡なしでも立体画像を見ることができる装置です。
- LCDタブレット (Tangible IP-NW Designer、Tangible BPA)
- LCDの画面上をペンで操作することにより、入力することができる装置です。
- デジタルペン(Tangible IP-NW Designer、Tangible BPA)
- 専用紙にペンで書くことにより、その情報を自動的にコンピュータに入力できる装置です。
- タッチパネル (Tangible BPA)
dd>画面に手でタッチすることにより入力可能な装置です。
Crafting a User Experience Curriculum
Boxes and Arrows: Crafting a User Experience Curriculum
http://www.boxesandarrows.com/archives/crafting_a_user_experience_curriculum.php
にジェイソン氏 (Washtenaw Community大学のインターネットProfessional部の教員) が教えるカリキュラムについての記事があるので参考にメモっておこう。
こういうのって日本での教育現場ではどうなっているんでしょうね。若干興味あり。
なんとなく会社の組織もこういう感じになったほうがいいのかも (?) とか考えさせられてしまいます。
IA系ワークでは下記の項目があげられています。
自らを見つめなおすと、ここまできちんとしたことがあるだろうかと反省してしまう……。
- 組織
- ラベリング
- カードソーティング
- サイト図(提出物が以前に言及されている状態で、一致します)
- ナビゲーション
- インタフェースデザイン(また、同時に起こります提出物を)
- 検索(サイトとサーチエンジン最適化)
- 満足しているデザイン(例えば、ウェブのために書いて、色/テキスト色、字体などをリンクしてください)
また、ユーザー・エクスペリエンス系ワークでは下記があります。
- ユーザテスト(ユーザビリティテスト)*
- ウォークスルー
- ユーザビリティ点検(専門のレビューか発見的な評価)*
- タスク解析*
- *をStoryboardingします。
- スタイルガイド*
- シソーラスと制御ボキャブラリー
- 分類をFacettedしました。
- アクセシビリティ点検(専門のレビューか発見的な評価がアクセシビリティ問題に焦点を合わせた)*
なんか会社の教育とかもこういう観点からきちんと整理したほうが〈本当は〉いいんだろうな。はてさて。