もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
EasyDrag jQuery Plugin by fromvega.com
16/07/08 UPDATE: A new beta version is now available with some bug corrections. Thanks to Randy for the useful feedback! 29/06/08 UPDATE: Handler feature added! Finally I decided to add a little piece of extra functionality to the EasyDrag plugin. It has been constantly requested, so now you can download and test it. I will be releasing it as a final version after some feedback, so please let me
第24回 何かに似せたユーザー・インタフェース
今回は「何かに似せたユーザー・インタフェース」について考えてみたいと思います。何かに似せたインタフェースというのは，つまりすでにある何かによく似ている，もしくは同じように使えるインタフェースを用意する，ということです。 なんて書くと，「パクリ」や「インスパイヤ」と呼ばれる，流行っているサイトのデザインをそのままそっくりまねる手法を思い出してしまうかもしれません。流行っているサイトのデザインには，もしかしたら何らかの特長的ですばらしい点があるかも知れず，それをまねすることは，「まねただろう」といわれるデメリットを差し引いてもメリットがあるのかもしれませんし，もう少し意味を広げて，すでにあるサイトの良さをいかにうまく取り込むか，ということになれば，すごく意味があることだと思います。 でも今回の「まねる」はそういうほかのサイトのデザインをまねる，という話ではありません。もう少し広い意味であったり
メタデータによる“右脳の補完”で進む「ネットとリアルの融合」
ウェブブラウザが登場した1994年。その頃と同じ、あるいはそれ以上の興奮が、世界を席巻しようとしている。「右脳的インターネットの世界」が、すぐそこにまで近づいてきているためだ。 これまで、そのほとんどが論理的思考を軸とした左脳的役割に終始していたパソコンの世界。さまざまな企業が家電製品とパソコンの融合を試みてきたが、結果として成功している事例はほとんどない。米Appleの最高経営責任者（CEO）であるSteve Jobs氏の言葉を借りると、「パソコンはテレビの代用にはならない。テレビを見る時は頭をOFFにしているからだ」ということであろう。 インターネットも例外ではなく、ネットとリアルという対極同士が、今ひとつ融合という意味合いにおいてしっくりこなかったのは、左脳的役割に偏ったネットの特性が、その大きな理由のひとつだったことは間違いない。 ではなぜ、ネットは右脳的役割を果たすことができなか
Avago、タッチパッド/トラックポイントに続くポインティングデバイス
会期：6月5日～9日 会場：Taipei World Trade Center Exhibition Hall 1/2/3 Taipei International Convention Center 半導体部品企業のAvago Technologiesは、COMPUTEX会場において、ノートPC向けの新しいポインティングデバイスを公開した。 Avagoは、Hewlett-Packardの電子部品開発部門を分社化したAgilent Technologiesから、さらに半導体部品部門を分社化して誕生。一般ユーザーへのなじみは薄いが、光学センサーやレーザーセンサーを使っているマウスのセンサーや、液晶ディスプレイのLEDバックライト用デバイスなどを開発しており、マウス用センサーは世界シェア1位。ユーザーが知らないところでお世話になっている企業である。 そのAvagoが公開したのが、タッチパッドや
検索ユーザーの目線はどう動く Yahoo！とGoogleで違い
アイレップとジャパンマーケットインテリジェンスは6月11日、Yahoo！JAPANとGoogleの検索結果画面を見ている際のユーザーの目線の動きを調べた結果を発表した。Yahoo！は「関連検索ワード」や「Yahoo！カテゴリ」が注目されており、Googleはサイトのタイトルを最初から最後までよく読まれているという傾向が見えた。 測定は昨年9月から10月にかけ、目の網膜に照射した赤外線の反射を利用する専用機器を使い、無作為に選んだ76人（男女半々）を対象に実施した。 それぞれ、画面上部に検索連動広告が表示されている場合と、表示されていない場合に分けて調べた。 Yahoo！検索で広告が表示されていない場合、目線は「逆L字型」に動く。検索結果の上に表示される「関連検索ワード」や「Yahoo！カテゴリ」を見るために目線が右に動き、その後目線が左に戻り、検索結果サイトのタイトル先頭部分を下まで流して
観的なインタフェースをめざして
現在使われている計算機のほとんどは ウィンドウやマウスを使った グラフィカルユーザインタフェース(GUI)で操作を行なうようになっているが、 GUIが一般に普及する前は キーボードを使った コマンドラインユーザインタフェース(CUI)で計算機に指示を与えたり 結果を表示させたりするのが普通であった。 CUIに比べるとGUIは圧倒的に操作が直観的になることが多いため、 GUIを持たない計算機は現在ほとんど考えられなくなっているといえる。 家電製品などあらゆる機器で計算機やネットワークの機能が利用されるように なりつつあるが、これらの世界では現在でもCUI的なインタフェースが利用されていることが多い。 たとえば テレビのチャンネルを変えるために リモコンの数字キーでチャンネル番号と決定ボタンを押すという方式はCUI的な操作といえるだろう。 ビデオの録画予約にしても電子レンジにしても 直観的でな
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ:phpspot開発日誌
サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ 2007年06月04日- chris erwin dot com - CRIR: Checkbox Radio Input Replacement This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ。 ライブラリを使うことで、次のようなフォームを実現することが出来ます。 必要なCSSとライブラリを読み込んで、input に class をあてるぐらいの簡単な方法でフォームの変更が可能です。 CSSデザインなので画像を変更で自分好みのフォ
不気味の谷現象とアプリ・デザイン - huixingの日記
ロボット工学の森政弘氏による仮説である不気味の谷現象とはロボットの姿や動作が人間に近づくにつれて好感が増していくが、ある時点までくると、ロボットに対する人間の感情は嫌悪感や不気味感をいだくようになる。その後ロボットが人間と限りなく区別がつかないようになると、人間の感情は再び好感に変わっていくというもの。bill higginsはブログでこの不気味の谷現象を引いて、アプリケーションも周囲の環境に合わせて、windowsアプリケーションはwindowsらしく、macアプリケーションはmacらしく、webアプリケーションはwebらしくふるまうべきだとしている。マイクロソフトのアクティブ・デスクトップはデスクトップ上でアプリをwebのように操作するものだったがユーザーの期待する操作と違っていたためユーザーをとまどわせた。JAVAもwindowsやmacやlinuxをまねていたが、あくまでJAVA
ソーシャルウェア･ユーザビリティ : 小野和俊のブログ
これまで長い期間に渡って、ソフトウェアは一人で使うためのものだった。 ここで言う「一人で使う」ということの意味は、自分以外にも家族も使うかどうかというような意味ではない。例えばテキストエディタは他の PC の前に座っている誰かとリアルタイムで共同編集するものではなかったし、ゲームはネットに接続せずに自分一人で遊ぶものだった。そういう意味でソフトウェアはこれまで長い期間に渡って一人で使うためのものだった。 だからこれまで私たちは、ユーザビリティのことを考えるとき、まず自分が一人で使うときに使いやすいかどうかを考えてきた。 例えば、昨日はてなの伊藤さんが書いていたような、コミュニティに蓄積されるコンテンツを良質なものにするために、あえて一人で使うときの利便性に目を瞑るという考え方は、ソーシャルウェア・ユーザビリティを重視したアプローチと言えるだろう。 以前、はてなブックマークと del.ici
ユーザー・インターフェイスの設計に大切なのはデザイン・ポリシー
何かの「ユーザー・インターフェイス」を決める時に大切なことは、自分なりのはっきりとした「デザイン・ポリシー」を持って、誰が何と言おうと最後までそれをしっかりと押し通すこと。そういう「柱」をしっかりと持たないで作ったものは、往々にして「妥協の産物」になってしまう。 私が常に心がけていること（つまり、私のデザイン・ポリシー）は、「ユーザー・シナリオを８０：２０ルールで切り分け、常に８０の方（つまり多くの人が使うだろう機能）を最優先にした設計にし、２０の方（あった方が良いかもしれない機能、一部の人が必要とするかもしれない機能）は思い切って犠牲にする」こと。 典型的な良い例が、Youtubeを見るためのサービス、Rimo と oreseg。 機能的には、カテゴリー分けはしてくれているし、サムネールから自分で見たいものを選べるし、oresegの方が上である。しかし、「ただだらしなく面白そうなビデオを
JavaScriptで簡単に独自の右クリックメニューを作成するライブラリ「RightContext」:phpspot開発日誌
MS、パケット情報の解析ツール「Microsoft Network Monitor 3」を無償公開 次の記事 ≫：PHPからjQuery（JavaScriptライブラリ）を簡単に使うことができる「PQuery」 RightContext JavaScriptで簡単に独自の右クリックメニューを作成するライブラリ「RightContext」。 ページで右クリックを押したときに、次のようにポップアップで独自メニューを出すライブラリが公開されました。 右クリックにメニューを組み込んでしまうことで、ツールによっては大変便利な使い勝手を提供できるはずです。 以下に実装方法を紹介。 (1) まずScriptファイルを読み込みます。 <script type="text/javascript" src="rightcontext.js"></script> (2) 次に右クリックしたときに独自メニューを表
ユビキタスの街角: 大型ディスプレイのマルチタッチインタフェース
Fast Companyという雑誌で、 ニューヨーク大学のJefferson Hanという人物が作った 大型のマルチタッチディスプレイパネルが特集されていた。 Han氏はTED会議でもデモを行ない人気を集めたらしい。 ビデオを見る限り、アプリケーションは派手ではあるが、装置や操作インタフェースは比較的普通に見える。 Fast Company誌の説明によると、 半透明な表示パネルの下を光線が通過しており、 指でパネルを押すと光線がそこに当たって散乱して光るのをカメラで検出するという原理らしく、 ソニーのHoloWallと似ているようである。 圧力を直接検出できるわけではないが、強く押すとそれだけ光の散乱が多くなるので、 ある程度は押した力を検出できるのだろう。 大型のタッチパネルディスプレイを使ったインタフェースに関しては、 特にCSCW (Computer-Supported Cooper
安藤日記
Joshibi Art Museum MIT Media Lab. Tangible Media Group を率いる テニュアの石井教授の話を聞いてきた。 研究予算獲得のため日本企業を行脚中とのこと。 英語 50%, 日本語 50% の、超早口プレゼンには圧倒されるとともに、 僕自身も感化されて、同時にあふれんばかりのアイデアが浮かんできた。 忘れないうちに、講演内容のポイントを.... ■デジタルによって消えてしまったものが何かを考える ■なんでもできるけど、何一つ満足にできないのは意味ない。 ■foreground で使っているものを background にしてみる ■ブラウザを使わない、パソコンを使わないインタフェースとは ■ghostly presence：身体を表現せずに記憶を喚起する ■光と陰の関係 ■本来物理的な物質はデジタルでも物質的に表現する ■マイノリティーリポート
ユーザビリティ設計メソッド一覧
週末にも関わらず、今日も自宅でお仕事（ホワイトカラーエグゼンプション実践中ですが何か？）。なのでコレといった記事も書けないのですが、先日のビジュアライゼーション周期表と同じ感覚の「ユーザビリティ設計メソッド一覧表」とでも呼ぶべきものがあったのでちょっとご紹介： ■ UsabilityNet: Methods table ユーザビリティとユーザー中心設計を促進することを目的として、EUからの資金援助を受け設立されたプロジェクト"UsabilityNet"の1コンテンツ。優れたユーザビリティを設計するのに役立つメソッドがテーブル形式で一覧されています： テーブルは「企画立案と実行性確認（Planning & Feasibility）」「要件定義（Requirements）」「デザイン（Design）」「実施（Implementation）」「テストと計測（Test & Measure）」「公開
映画に見るインターフェース -- 10の間違い
Useit.com に、こんなネタ記事がありました。ネタとはいえ、なかなか面白いのでちょっとご紹介を。 ■ Usability in the Movies -- Top 10 Bloopers (Jakob Nielsen's Alertbox) 「映画内に登場するユーザーインターフェースの誤りトップ10」ということで、以下の10コが取り上げられています： どんなインターフェースでも使いこなす主人公 現代のデザインを使いこなす、タイムトラベルで過去から来た人物 3Dインターフェース（※実際には2Dインターフェースの方が操作性に優れている/例：『マイノリティ・リポート』のコンピュータってカッコいいけど、あれって本当に使いこなせるの？） どんな機器とも相互接続して、どんなデータでも読み取れる端末（※例：『24』のジャック・バウアー） 不要な「アクセス完了」メッセージ（※正しいID/パスワードを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Connection Problem
developersnippets.com
ウインドウの横に隠れるサイドナビゲーションJavaScript （side-bar.js） - youmos
ソシオメディア | UIデザインパターン
