タグ

uiに関するkimiko0217のブックマーク (18)

  • スマホのUI考2 〜 フィードバックについて | fladdict

    UIについて徒然と考える自分用メモ、2回目はフィードバック。ユーザーに「何かがおきたよ!」と如何に明解に知らせるか?1回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは? ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、

    kimiko0217
    kimiko0217 2011/06/14
    振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。
  • fladdict » スマホのUI考 〜 ボタンについて

    SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ

    kimiko0217
    kimiko0217 2011/06/14
    世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。
  • サイトの強み・弱みを可視化する、ヒートマップ9選 | TuiTui

    どこをクリックしたのかなどを、サーモグラフィーのように可視化できるツールです。 これを使うことで、サイト上で訪問者が注目を集めている場所や、 逆に思ったよりも効果が出ていない部分を知ることができるので、

    kimiko0217
    kimiko0217 2010/09/07
    ■よく利用されている9つのヒートマップツール 1.UserHeat(日本製・無料)  2.UserInsight(日本製・有料)  3.HeatClick(日本製・有料) 4.Durasite-Click!(日本製・有料)  5.crazyegg(海外製・有料)  6.ClickTale(海外製・有
  • テキストリンク色の変更で、70億円(!)を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar

    ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青(水色に近い)を採用していました。   Bingよりも、明るいというかすこし緑に近い感じの色がベースになっていますね。 ちょっと比べてみました。 (※Live Searchは画像検索からキャプチャを取っています) こう見ると確かに色はかなり変化しています。 CNETの記事によると、マイクロソフトはBingを作る過程でかなりの数の色をテストしたようです。 Microsoftは最終的に「Bing」となるものを設計していたとき、膨大な数の色を検証し、

    kimiko0217
    kimiko0217 2010/04/21
    複数の色合いの中から特定の青色(色に詳しい人のために紹介しておくと、「#0044CC」)を選ぶことで、広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したという。
  • 実用的なユーザビリティの10のポイント:ガイドライン編 | コリス

    ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

    kimiko0217
    kimiko0217 2009/09/30
    # 1. ラベルはフィールドの上に配置 # 2. フォーカスは視線の先に # 3. デザインのクオリティは信頼を与える # 4. ランディングページのスクロール # 5. リンクはやっぱりブルー # 6. 検索ボックスの文字数 # 7. ホワイトスペース
  • Web情報アーキテクチャ(IA)とツール 記事一覧 | gihyo.jp

    運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    Web情報アーキテクチャ(IA)とツール 記事一覧 | gihyo.jp
    kimiko0217
    kimiko0217 2009/09/30
    この連載では,Webサイト構築における「情報アーキテクチャ (IA)」をテーマに,主にWebデザインに関わる方々を対象とした,ツールの紹介や使い方などを紹介します。
  • プログラマーが作ったかのように見える UI - everything might happen tomorrow - yhassy - builder by ZDNet Japan

    大企業向けのソフトウェアによくありますが、開発期間や予算の都合でインターフェイスも含めすべてプログラマーが作る場合があります。すべてに言えるわけではありませんが、プログラマーUI デザインまで受け持つことで結果的に使い難いソフトウェアになることもあります。プログラマー Ian Voyce さんのブログに掲載されている「The 7 signs your UI was created by a programmer」という記事で、いかにもプログラマーが作ったと思えるような UI の特徴を7つ紹介しています。デザイナーもソフトウェアの使い勝手を考える際に気をつけたいチェックポイントも幾つかあります。コメントにも追加されている特徴も含め以下に要約しておきます。 感嘆符 (!) を多用しているダイアログボックス マウス以外の操作不可 (タブで順に移動出来ない) すべてのフォーム要素をグルーピング

    kimiko0217
    kimiko0217 2009/09/24
    # 感嘆符 (!) を多用しているダイアログボックス # マウス以外の操作不可 (タブで順に移動出来ない) # すべてのフォーム要素をグルーピングしている # IDEで作成したアイコン # DataGridコントロールの多用 # 「コマンドが実行さ
  • [コラム]IA視点のWebプロジェクト コーナーの記事一覧 | Web担当者Forum

    このコーナーについて いまや日常生活になくてはならないものとして普及したWebサイト。しかし、そのWebサイトの作り方も、より長期的に考えながら作る時代にさしかかっています。このコラムでは、企業のWeb担当者、広告代理店や制作会社のディレクター・プロデューサーと呼ばれる方々を対象に、5年後も生き残れるWeb制作プロジェクト運営のヒントを、Webサイト設計の第一人者であり、数多くのプロジェクトを成功させてきた株式会社コンセントの長谷川敦士氏が情報アーキテクチャ設計の観点からアドバイスしていきます。

    [コラム]IA視点のWebプロジェクト コーナーの記事一覧 | Web担当者Forum
    kimiko0217
    kimiko0217 2009/09/23
    いまや日常生活になくてはならないものとして普及したWebサイト。しかし、そのWebサイトの作り方も、より長期的に考えながら作る時代にさしかかっています。このコラムでは、企業のWeb担当者、広告代理店や制作会社のデ
  • UI Document

    情報アーキテクチャ、インタラクションデザイン記述のためのビジュアルボキャブラリー version 1.1b-j (29 June, 2002) based on version 1.1b (6 March 2002) 目次 サマリー バージョン履歴 はじめに 基概念 基要素:ページ、ファイル、そしてそれらの集まり 関係性の記述:コネクターと矢印 すべてを一度に:並列セット 一時中断:連続ポイント 共通要素:エリアと反復エリア 再利用可能な要素:フローエリアと参照 条件要素の基概念 選択せよ:意志決定点 探検者(パスの誘導):条件的なコネクターと矢印 複数の選択:条件的な分岐 一つか複数か:条件的な選択肢 一つの決定、複数のパス:クラスター 制約条件あり:条件的なエリア 結論 ダウンロード可能なパーツライブラリ サマリー ダイアグラムはウェブ開発チーム内で情報アーキテクチャやインタラク

    kimiko0217
    kimiko0217 2009/09/07
    情報アーキテクチャ、インタラクションデザイン記述のためのビジュアルボキャブラリー
  • IDEA * IDEA

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

    IDEA * IDEA
    kimiko0217
    kimiko0217 2009/06/17
    またしても「本当に使えるものだけご紹介」シリーズ。Smashing Magazineで「40+ Helpful Resources On User Interface Design Patterns」なる記事があったので全部開いてみて本当に使えそうなものだけピックアップしてみましたよ。40個は多い
  • [JS]ドリルダウンやフライアウトなど、アニメーションのエフェクトを持つナビゲーションのスクリプト -fg.menu

    iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。 Dropdown, iPod Drilldown, and Flyout styles demo: drilldown 上記のデモでは、クリックした項目のパネルが次々にスライドするドリルダウン型のナビゲーションで、上部にはパンくずが実装されています。 パンくず機能の代わりに、戻る機能の「Back」ボタンが実装されているものもあります。

    kimiko0217
    kimiko0217 2009/04/08
    iPod風のドリルダウン型、飛び出すエフェクトのフライアウト型、シンプルなドロップダウン型など、アニメーションのエフェクトを持ったナビゲーションのスクリプトをfilament groupから紹介します。
  • RIAコンソーシアム通信 コーナーの記事一覧 | Web担当者Forum

    RIAコンソーシアムが発行する、RIAの普及促進や開発に関するガイドライン「RIAシステム 構築ガイド」やワーキンググループが実施するRIAに関する市場調査の結 このコーナーについて RIAコンソーシアム(RIAC)とは、RIAの普及・発展、ビジネスへの活用推進を目的とし、関連技術や課題・解決策の研究および情報収集等に取り組むべく、業種を超えた企業の参画によってスタートしたコンソーシアム。 「RIAコンソーシアム通信」では、RIAコンソーシアムが発行する、RIAの普及促進や開発に関するガイドライン「RIAシステム 構築ガイド」やワーキンググループが実施するRIAに関する市場調査の結果などをお伝えしていく。

    RIAコンソーシアム通信 コーナーの記事一覧 | Web担当者Forum
    kimiko0217
    kimiko0217 2009/03/11
    「RIAコンソーシアム通信」では、RIAコンソーシアムが発行する、RIAの普及促進や開発に関するガイドライン「RIAシステム 構築ガイド」やワーキンググループが実施するRIAに関する市場調査の結果などをお伝えしていく。
  • モバイルサイト構築前に知っておきたいユーザビリティ10のポイント(第1回) | モバイルサイト構築のユーザビリティいろは

    端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト(以降“モバイルサイト”)の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で

    モバイルサイト構築前に知っておきたいユーザビリティ10のポイント(第1回) | モバイルサイト構築のユーザビリティいろは
    kimiko0217
    kimiko0217 2009/01/30
    # ファーストビューの重視 # 優先順位の高いものは“画面上部”に掲載 # ページ内リンクで操作性を確保 # 主要導線ページはなるべく軽くして体感速度を理解する # 詳細ページでは軽さよりも情報量を優先する # 画像“点数
  • ユーザビリティ定量調査

    ユーザビリティの定量調査には定性調査(こちらの方がよい洞察が得られることが多い)の4倍のコストがかかるが、それだけの価値を発揮する場合もある。とりわけ、管理職の人々がデザインの進捗状況を追跡し、製品の出荷時期を判断する材料として役立つ点は重要だ。 Usability Metrics by Jakob Nielsen on January 21, 2001 ユーザビリティは測定可能だが、そんなことはめったにやらない。なぜだろう?定量調査は高くつくので、ただでさえ乏しいユーザビリティ資源の使い方としてはふさわしくないからだ。 ユーザビリティに十分な予算を投入している企業は、まだ数少ない。予算が少ないとすれば、定量測定はやめにして、もっと手軽な定性的手法に目を向けるべきだ。こちらの方が、対費用効果ははるかに大きい。一般的にいって、デザインを改善する上では、数字より洞察の方が役に立つ。 しかし、ユ

    ユーザビリティ定量調査
    kimiko0217
    kimiko0217 2009/01/07
    ユーザビリティ測定基準を決めるのは簡単だが、データの収集が難しい。通常、ユーザビリティは、一定のテストタスクをユーザがどれくらい効率よく達成できたかという相対値で測定する。もっとも基本的な基準としては
  • アプリの“使いやすさ”は“数値”として見積もれるのか ─ @IT

    アプリの“使いやすさ”は “数値”として見積もれるのか リッチクライアント・カンファレンスIV Aトラックパネルディスカッションレポート ~自社のWebアプリの使い勝手を評価してみましょう~ @IT編集部 2008/10/28 2008年9月19日、東京・目黒雅叙園にて@IT編集部主催による「リッチクライアント・カンファレンスIV」が行われた。稿では、Aトラックのパネルディスカッション「自社のWebアプリの使い勝手を評価してみましょう」の模様をレポートする(基調講演やBトラックのパネルディスカッションの模様は記事「セキュリティ、開発負荷削減、エンドユーザー支援が鍵」を参照)。 パネリストとして出席したのは、アドビシステムズ マーケティング部クリエイティブソリューション部 Webグループ ディベロッパーマーケティングスペシャリストの轟啓介氏、カール RIAエバンジェリストの三野凡希氏、日

    kimiko0217
    kimiko0217 2009/01/07
    新野氏は「ユーザビリティテストのようなUX評価のノウハウがあるか。または、要件に『目的を達成するのに平均でどれくらい時間がかかるか』といったことは書けるものなのか」とまず、川西氏に尋ねた。「実際にはまだ
  • システムの使い易さの客観的な定量評価手法を構築(2008年11月6日): プレスリリース | NEC

    NECはこのたび、システムの使い易さ(ユーザビリティ)を客観的かつ定量的に評価できるチェックリスト評価法を構築しました。また、手法を実際の製品に適用し、有効性を実証しました。 評価法は、京都産業大学と連携して構築したもので、ユーザビリティの項目ごとに評価手順や判定基準を詳細化したチェックリストと、用語定義集および事例集から構成されています。更に、項目ごとに「学習し易さ」、「エラーの少なさ」、「記憶し易さ」、「効率性」の4つの観点によるウェイトを設定しています。これにより、評価者の知見や裁量によることなく、システムのユーザビリティを評価することができます。 手法を用いることにより、従来、評価者によって結果のばらつきがあったユーザビリティ評価結果の客観性を高めることができます。京都産業大学で評価実証を行ったところ、ユーザビリティの初心者が用いた場合でも、概ね7割以上が熟練者による評価結果

    kimiko0217
    kimiko0217 2009/01/07
    本手法を用いることにより、従来、評価者によって結果のばらつきがあったユーザビリティ評価結果の客観性を高めることができます。京都産業大学で評価実証を行ったところ、ユーザビリティの初心者が用いた場合でも、
  • もうユーザビリティの「べからず集」はいらない! - @IT

    もうユーザビリティの「べからず集」はいらない!:デザイナにおすすめのユーザーインターフェイスデザイン6つのポイント(1)(1/2 ページ) はじめまして。数年、Webアプリケーション開発会社でUI(ユーザーインターフェイス)制作を担当しているデザイナの嶋田です。業務アプリケーション開発を中心に、ユーザーの業務を理解して、情報設計、最適なUIデザインの提案を目指しています。 この連載では、これまでの経験を生かして、私と同じようなWebアプリケーションのUI(ユーザーインターフェイス)制作を担当する方々を対象に、ユーザビリティ向上のヒントとなる要素をご紹介していきたいと思います。 ユーザーインターフェイスって? あなたは電車に乗るときに、「どのようなモーターで駆動しているのか」や「どのような材質で車両ができているか」を気にするでしょうか? あなたの見えない場所でいかに複雑で高度なことが行われて

    もうユーザビリティの「べからず集」はいらない! - @IT
    kimiko0217
    kimiko0217 2008/11/12
    この連載では、これまでの経験を生かして、私と同じようなWebアプリケーションのUI(ユーザーインターフェイス)制作を担当する方々を対象に、ユーザビリティ向上のヒントとなる要素をご紹介していきたいと思います。
  • ユーザーにとっては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
    kimiko0217
    kimiko0217 2008/10/02
    第2回となるbuilder tech dayの基調講演に登壇したソシオメディア取締役、上野学氏は「ユーザーにとってはUIがすべて」だと指摘する。ユーザーとは誰なのか?良いUIとはなんなのか?――ソシオメディアのUIデザイン原則を紹
  • 1