UX/UIデザインガイドライン : 小野和俊のブログ
このところ、アプレッソの中でも、MIJS製品技術委員会でも、自分たちのソフトウェアのUX/UIをブラッシュアップしていくためにどんなことができるのかをディスカッションしている。 UX/UIデザインガイドラインとして各社の推奨する指針をまとめたものがWebで公開されているので、プログラマーであれデザイナーであれ、ソフトウェアの画面設計に何らかの形で携わるのであれば、基礎知識として主要なものには目を通し、プログラマーがデザインパターンの用語で手短にコミュニケーションが取れるのと同じように、「ここは○○ガイドラインの△△パターンを使うのはどうかな？」というような会話ができるようにしていきたいと思っている。 ■ Apple ・アップル ヒューマンインターフェースガイドライン ・iOSヒューマンインターフェースガイドライン(PDF) ・iPadヒューマンインターフェースガイドライン(PDF) ■ M
Windows 8はリボンインタフェースを採用？
Microsoftの次期版OS「Windows 8」の初期ビルドとされるものがネットに出回っている。同OSはOffice 2010と同じリボンインタフェースを採用するようだ。 ビルドを調査した技術者によると、Windows 8ではエクスプローラのツールバーの代わりに、Office 2010と同様のリボンインタフェースが置かれている。エクスプローラのメニューバーには「Home」「Share」「View」の3つのメニューが配され、それぞれからリボンを展開して、「新規フォルダ作成」「コピー」など詳細なメニューにアクセスできるようになっているという。現行版のWindows 7ではペイントとワードパッドにリボンインタフェースが採用されている。 この技術者は、Windows Phone 7のようなタイル式インタフェースや、独自のPDF閲覧ソフト「Modern Reader」も報告している。 Micro
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
折りたたみできるクールなテーブル実装ができるjQueryプラグイン「jExpand plugin」:phpspot開発日誌
Expand table rows with jQuery - jExpand plugin 折りたたみできるクールなテーブル実装ができるjQueryプラグイン「jExpand plugin」 デモページ 右端の▼をクリックでペロンと中身が開けるテーブルをjQueryプラグインで簡単に実装できるようです。 仕組みとコードについても解説されています。 使い方は簡単で、$(#sometable").jExpand(); のように簡単に設定することが出来るようです。 関連エントリ コンピュータに指定フォントが入ってるかチェックできるjQueryプラグイン「jquery-fontavailable」 Youtubeの動画URLやvidからサムネイルを簡単に取得できるjQueryプラグイン「jYouTube」 タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
グーグル、UI改善に利用のアイトラッキング技術を明らかに
カリフォルニア州マウンテンビューのGoogle本社を訪れた際、Googleがプロダクトのユーザーインタラクションを追跡するのに利用しているテストルームをのぞくことができた。GmailのプロダクトマネージャーTodd Jackson氏によると、ここはGoogleが保有する多くのテスト施設の1つで、チームはテストを通じてユーザーがGmailをどう利用しているのかに関する重要なフィードバックを得ているという。ユーザーチャットなど機能全体の画面配置を変更するには十分である。 Googleは米国時間2月6日、この技術を他のプロダクトに反映した結果を明らかにした。今回取り上げたのは、同社の中で最もトラフィックの多いgoogle.comの検索結果ページに関するもの。 当然、ほとんどのユーザーが気にするのはページの上に表示されるコンテンツである。しかし、Googleが明らかにしたこのビデオで面白いのは、ユ
Chromeはなぜ速いのか － ＠IT
Chromeの動作が圧倒的に速いように感じている。Chromeがリリースされた当初、それがなぜなのかよく分からなかった。グーグルだけにできて、ほかのWebブラウザ開発者にできないことなどあるように思えないが、それにしてはあまりに速いように感じたからだ。 その疑問のほとんどは、Chromeのオープンソースプロジェクト版「Chromium」の公式ブログの解説で氷解した。ブログを読んで分かったのはグーグルのエンジニアたちが信じられないほどのスピード狂であることと、そのスピードへのこだわりには2種類の“スピード”があることだ。 1つは処理速度、もう1つは応答速度だ。特に後者、ユーザーをできるだけ待たせない、イラつかせないということに対する徹底したこだわりは、すさまじい。その背後には「スピードとは、つまりお金だ」という洞察があるようだ。 0.5秒の遅延でユーザー離れ グーグル創業約1年後の1999年
第25回 ユーザは使いよう | WIRED VISION
第25回 ユーザは使いよう 2008年7月22日 ITデザイン コメント： トラックバック (0) （これまでの増井俊之の「界面潮流」はこちら） 近年のユーザインタフェース開発では「ユーザ中心設計」（User-centered Design）を行なうことが常識になっています。システム設計者の思い込みにもとづいて作られたシステムがユーザにとって使いやすいものになる可能性は低いですが、設計の初期段階からユーザの欲求についてよく検討し、設計の途中段階においても実際にそれが使いやすいかどうかテストを行ないつつ開発を行えば、本当にユーザにとって使いやすいシステムを開発することが可能になります。 ユーザビリティの専門家のJakob Nielsenは以下のような5個の要素を使いやすさの目標としてあげています。 1. 学習しやすさ （Learnability） 2. 効率 （Efficiency） 3.
なぜ iPhone の操作はキビキビしているのか
iPhone のデモを見て印象的なことのひとつは、流れるようなマルチタッチの操作だろう。 Anders Brownworth のとても分かりやすい解説を Carl Howe が取り上げている。 Blackfriars’ Marketing: “More iPhone lessons” by Carl Howe: 19 September 2007 ＊ ＊ ＊ 専用のグラフィックスプロセッサ ノキアの画面は iPhone に比べはっきり分かるほど遅い。これは iPhone がグラフィックスに特化した専用のプロセッサを持っているためだと思う。例えばカバーフローや住所録のスクロールをしようとすると、iPhone の OS はグラフィックスチップに対してこんな画面やこんなテキストを含む画面があると知らせる。さらに OS は、その画面をディスプレー上のどこに位置させるかグラフィックス
タッチスクリーンで映画『マイノリティリポート』は現実になる
トム・クルーズ主演の映画『マイノリティ リポート』、覚えてます？ オブジェをあっちにどけ、こっちに引っ張り、脇にうっちゃって欲しいものを取り出す…まさに乱暴な主人公の言いなり。あの｢ありえない｣インターフェイスがとうとう現実になりました！ 開発したのはニューヨーク大学クーラント数理科学研究所のジェフ・ハン研究員（左）。 タッチ、ジェスチャー、それに圧力の程度まで読み分けてくれるUIで、まるで机の上に写真を引っくり返していじってるのと変わりません。ツリーの展開は指の動く通り枝がニョキニョキ生えてくようだし、3Dの球体や顔面も粘土いじりみたいに形を変えます。フォトショップとかに応用したらエラいことになりそ…。スクリーンの端から端まで写真をフリップするシーンは…もう、目の前で何が起こったのか…。唯一理解できるのは、どう見てもこの人たちはトム・クルーズじゃない、という事実だけです。 これはもう口で
PHPタグクラウドのチュートリアル:phpspot開発日誌
PHP Tag Cloud Tutorial | Prism-Perfect.net Well, it's actually so simple it's not really a tutorial at all so much as a snippet with a bit of explanation. But I've had some people ask how it's done, so here's how I do it.PHPでMySQLからデータを取ってタグクラウドを作成するサンプルが公開されています。 MySQLテーブルのテーブル名とカラム名(id,クラウド対象カラム名)、 そしてフォントの最大サイズ、最小サイズを指定することで簡単にタグクラウドが生成できます。 次が出力されるタグクラウドのサンプル例 「PHP用タグクラウド生成ライブラリ（HTML_TagCloud）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一夜にして世界中を席巻したiPhoneアプリ「Clear」の裏側
Custom Controls for iOS, iPadOS, macOS, tvOS, and watchOS - Cocoa Controls
Trilancer.com
http://e0166nt.com/blog-entry-864.html
flexigrid.info
IDEA * IDEA
Flashを使った超絶クールなマルチタッチスクリーンUIがオープンソースで公開:phpspot開発日誌
ユーザーインターフェイスデザインの参考になるサイト集
Technologies for UI