UIに関するpublichtmlのブックマーク (39)

  • 新しいスマホ版Googleにみる、スマホサイトの未来 « H2O Blog.

    大げさなタイトルをつけてみましたが、先日Google家のスマホ版サイトをリニューアルしました。主に「Google+」の追加が主ですが、面白いロジックが仕込まれていて、スマホサイトの未来を垣間見る気がします。いくつか紹介しましょう。 固定ツールバー これまで、スマホサイトの構築では「要素を固定できない」というのが常識でした。 CSSの「position:fixed」が効かない上に、スクロール中は一切のスクリプト操作や、アニメーションGIFですらもストップしてしまうため、要素を固定したりすることはできなかったのです。 そこで、これまでは固定したい要素は「スクロールの開始直後にいったん消え、スクロール終了後に再度表示される」というのが一般的でした。jQuery Mobileの fixed toolbarがそのつくりです。 しかし、リニューアルしたGmailでは、スクロール中も固定したツール

  • スマホUI考3 ~ ジェスチャ入力について | fladdict

    スマホUI考1 〜 ボタンについて スマホUI考2 〜 フィードバックについて スマホといえばジェスチャー入力、ジェスチャーといえばスマホ。そんなジェスチャーについて、つれづれと。 でも個人的には、ジェスチャーはほとんど要らないと思う。 ジェスチャ全般 ・ジェスチャは補助操作。メイン操作ではない。 ・ボタンでできる操作をプラスアルファで、ジェスチャでもできるようにする。 ・なぜならジェスチャの有無は視覚的にわからない。 ・ユーザーがジェスチャを理解しなくても操作できるのがよい。 ・またジェスチャー時に、画面のかなりの部分が指で隠れる。 ・極論ジェスチャなしでもアプリがリリースできる状態なのがよい。 ・つまり予算や工数があまったときに入れよう。 タップ ・マウスクリックではなくタップ。 ・ボタンの精度は指のサイズに依存する。 ・細かい座標指定はできない。 ・ロールオーバーがない。 ・触ってみ

  • 考察:Appleはスマホサイトを作らない。

    今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう

  • 第3回 予測インターフェース | gihyo.jp

    はじめに 「よろしく」と入力すると「お願い」が候補に出るような「予測入力方式」が、携帯電話などで最近広く使われています。ユーザの次の行動を予測するようなシステムは「予測インタフェース」と呼ばれており、昔からさまざまなシステムが研究されてきています。 ユーザの行動を予測する方法はいろいろなものが考えられます。上の例の場合は「よろしくお願い申しあげます」という表現が世の中でよく利用されているという統計情報を利用して予測を行ったものですが、ユーザの行動履歴や現在のコンテキストなどの情報を利用することもできます。筆者の場合は「増井」という名前を入力する機会が多いため「ま」と入力すると「増井」が予測されます。時刻や位置情報のようなコンテキストを利用できる場合、渋谷で駅名検索するときは「し」から「渋谷」を予測し、新宿で検索するときは「し」から「新宿」を予測するといったこともできるでしょう。「⁠123」

    第3回 予測インターフェース | gihyo.jp
  • User Experience

    This section describes the motivations, assumptions, and directions behind Chromium and Chromium OS's user interface design. Its goal is to explain the current design in a way that further work can be developed in-style, or so that our assumptions can be challenged, changed, and improved. Chrome Features Window Window Frame | Tabs | Throbber | Toolbar | Omnibox Browsing Bookmarks | History | New T

  • Home

    Special Interest Group onComputer-Human InteractionACM SIGCHI is the leading international community of students and professionals interested in research, education, and practical applications of Human Computer Interaction.

    publichtml
    publichtml 2009/12/17
    計算機科学に関する世界最大の学会ACM (Association for Computing Machinery)でのユーザインタフェースに関連すカンファレンス
  • Facebookにログイン | Facebook

    Facebookにログインして、友達や家族と写真や近況をシェアしましょう。

    Facebookにログイン | Facebook
    publichtml
    publichtml 2009/11/28
    ToDo: 会社で英語得意な人に見てもらって説明内容を解説してもらう。
  • 10の累乗: ユーザーエクスペリエンスにおける時間スケール

    ユーザーインタフェースのデザインには0.1秒から10年以上まで数多くの異なる時間枠があり、そこには各々、固有のユーザビリティの論点がある。 Powers of 10: Time Scales in User Experience by Jakob Nielsen on October 5, 2009 ユーザーエクスペリエンスの分野には、そのバージョンの『パワーズ・オブ・テン』(10の累乗)*がある。我々にとって、物が10倍以上に大きくなったり、10分の1以下に小さくなったりすることはあまりない。つまり、たいていのユーザーインタフェースの物理的大きさはほぼ同じである。なぜならば、人間の身体との連携が必要だからだ。例えば、BlackBerryのキーボードはPCのキーボードの約5分の1の大きさだが、10分の1になってしまうとうまく機能しないだろう。そして、壁サイズのディスプレイを除けば、PCのも

    10の累乗: ユーザーエクスペリエンスにおける時間スケール
    publichtml
    publichtml 2009/11/08
    "拡張するメニューの上をクリックして、0.1秒未満でその拡張した部分を目にすれば、あたかも自分がそのメニューを開いたかのように感じるものである"
  • タブUI詳解

    タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル

  • 増井俊之 (Toshiyuki Masui)

    ▼増井俊之 Wiki Wired POBox 富豪的PG 研究テーマ ▶ブログ/書評 ▶雑誌記事 ▶論文 ▶著書/訳書 ▶講演/講義 ▶Webサービス ▶システム ▶雑情報 ▶アイデア ▶インタビュー ▶趣味/パズル ▶旅行/写真 ▶意見/感想 ▶連絡先 ▶検索

    publichtml
    publichtml 2009/09/06
    UIの偉い人。今は慶應にいるらしい。http://gc.sfc.keio.ac.jp/ で講義ビデオが見られる。
  • 手のひらに2000インチ大画面を再現?―ケータイを“のぞき窓”にする「知能センサーシステム」

    手のひらに2000インチ大画面を再現?―ケータイを“のぞき窓”にする「知能センサーシステム」(1/2 ページ) 臼田総合研究所の臼田裕氏が「第13回 MCPC『イノベーション・チャレンジ』セミナー」で紹介したのが、加速度センサーやジャイロセンサー、地磁気センサーなどを用いて2000インチ相当の映像を小さな画面で見るという「知能センサーシステム」だ。 臼田氏は最初に、「各種センサーを使ったユーザーインタフェースの進化が携帯電話などのモバイル機器で新しい技術トレンドになっている」と説明し、具体例として「W-ZERO3」シリーズや「iPhone」のようなデバイスを挙げた。スマートフォンに搭載され一般的となったタッチパネルはもちろん、Wiiリモコンのような加速度センサーを使ったもの、加速度センサーの代わりに端末カメラの映像から動きを感知する仕組みなどを紹介した。 現状では、こうしたセンサーが、端末

    手のひらに2000インチ大画面を再現?―ケータイを“のぞき窓”にする「知能センサーシステム」
  • UIデザインガイドラインのまとめ : could

    UIUXガイドライン UIデザインガイドラインのまとめ デザインガイドラインは、実際同じようなガイドラインを作るときだけでなく、UIデザインを考える際にも役立つ貴重な資料です。今まで個別で紹介したことはありますが、今回は一挙にまとめてリストアップしてみました。 Introduction to Apple Human Interface Guidelines 個人的に UI デザインガイドラインといえばこれ。日語訳も大変便利です Apple User Experience Guides ソフトウェア開発向けですが、イントロダクションあたりは参考になります iPhones Human Interface Guidelines 会員登録すると見れる PDF 資料ですが、上記のリンクからブラウザ上で観覧することが出来ます Windows User Experience Interaction G

    UIデザインガイドラインのまとめ : could
    publichtml
    publichtml 2009/02/02
    AppleとかSunとかのUIデザインガイドライン文書へのリンク集
  • ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする

    ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする
  • Response Times: The 3 Important Limits Article by Jakob Nielsen

    Summary: There are 3 main time limits (which are determined by human perceptual abilities) to keep in mind when optimizing web and application performance. Excerpt from Chapter 5 in my book Usability Engineering, from 1993: The basic advice regarding response times has been about the same for thirty years [Miller 1968; Card et al. 1991]: 0.1 second is about the limit for having the user feel that

    Response Times: The 3 Important Limits Article by Jakob Nielsen
    publichtml
    publichtml 2009/01/20
    Jakob Nielsen "Usability Engineering" 第5章より。恐らく、ユーザへのレスポンスは1秒未満で返らないとストレスフル、な感じの話。
  • Amazon.co.jp: インタラクションデザインの教科書 (DESIGN IT! BOOKS): Dan Saffer (著), 吉岡いずみ (翻訳), ソシオメディア株式会社 (翻訳): 本

    Amazon.co.jp: インタラクションデザインの教科書 (DESIGN IT! BOOKS): Dan Saffer (著), 吉岡いずみ (翻訳), ソシオメディア株式会社 (翻訳): 本
  • Amazon.co.jp: 未来のモノのデザイン: ドナルド・A・ノーマン, 安村通晃, 岡本 明

    Amazon.co.jp: 未来のモノのデザイン: ドナルド・A・ノーマン, 安村通晃, 岡本 明
    publichtml
    publichtml 2009/01/06
    「誰のためのデザイン?」の著者
  • Tabs, Used Right

    Summary: Follow these 12 design guidelines for tab controls to distinguish tabs from site navigation and address click uncertainty. Simplest GUI widgets are the building blocks for most functionality on the web, but it's rare to find sites that use all the dialog controls correctly. Even something as simple as radio buttons and checkboxes are incorrectly used half the time. And let's not even get

    Tabs, Used Right
    publichtml
    publichtml 2009/01/06
    タブのユーザビリティガイドライン
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    publichtml
    publichtml 2008/12/18
    1. クリック可能エリアは余裕をもって, 2. ラベルテキストが上に行き過ぎないように ...などなど。
  • 【コラム】シリコンバレー101 (293) MozillaのUIデザイナーがパイ型のコンテキストメニューを提案 | ネット | マイコミジャーナル

    Firefox 3を使っている方は、まずこのページのデモを試してほしい。2つのボックスがあり、上のボックス内でクリックすると1から7までの数字が並んだパイ型のメニュー、下のボックス内ではリスト型のメニューが出てくる。それぞれで"6"を選択するスピードを実感してもらうためのデモだ。 Mozillaのユーザーインタフェース(UI)デザイナーJono DiCarl氏が10月28日に、Webブラウザにおけるパイ型コンテキスト・メニューの可能性をブログで提案した。上記のデモは、その実験1である。 どちらのメニューが"6"を選択しやすかっただろうか。DiCarl氏は、UI操作の効率性を現したフィッツの法則(Fitts’ Law)を挙げて、パイ型の優位性を説いている。 フィッツの法則 T = a+b log2 (D/W + 1) T = ポインターがターゲットまで動くのにかかる時間 D = ポインターの

    publichtml
    publichtml 2008/11/07
    UI操作の効率性を現したフィッツの法則 T = a+b log2 (D/W + 1)。 パラメータ定義は本文参照。
  • ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan

    シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書

    ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
    publichtml
    publichtml 2008/10/07
    UIのいい話。 デザイン仕様の検討は少人数で/機能や画面を減らす/ユーザーを教育しない、などなど。