uiに関するflakwingのブックマーク (298)

  • ウェブサイトでやってしまいがちなユーザビリティのミス

    ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー

    flakwing
    flakwing 2009/02/20
  • [CSS]スタイシートだけで実装するアクセシブルな折れ線グラフ

    スクリプトやフラッシュを使用しないで、スタイルシートだけで実装する折れ線グラフをcss globeから紹介します。

  • IDEA * IDEA

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

    IDEA * IDEA
  • 「直感的で分かりやすい」は都市伝説 - カレーなる辛口Javaな加齢日記

    http://www.chikawatanabe.com/blog/2009/02/symbols.html http://www.chikawatanabe.com/blog/2009/02/symbols2.html http://www.chikawatanabe.com/blog/2009/02/symbols3.html しかし、これ全くアメリカを初めとした英語圏では通用しないんですよねぇ。それ以外の国はよく知らないが、まず通じないのではないかと。どれくらい通用しないかと言って、たとえば日人が 「★ ※ ♪ の3つをいい順に並べろ」 と聞かれても呆然とすると思うが、それくらい通じない。つまり、○=よい、×=だめ、も通じなければ、△がその間に位置するということも通じないのでした。 今までにも何度か書いてるんだが,「直感的で分かり易い」という言葉を聞くこともあるが,これは非常に専門

    「直感的で分かりやすい」は都市伝説 - カレーなる辛口Javaな加齢日記
  • グーグル、UI改善に利用のアイトラッキング技術を明らかに

    カリフォルニア州マウンテンビューのGoogle社を訪れた際、Googleがプロダクトのユーザーインタラクションを追跡するのに利用しているテストルームをのぞくことができた。GmailのプロダクトマネージャーTodd Jackson氏によると、ここはGoogleが保有する多くのテスト施設の1つで、チームはテストを通じてユーザーがGmailをどう利用しているのかに関する重要なフィードバックを得ているという。ユーザーチャットなど機能全体の画面配置を変更するには十分である。 Googleは米国時間2月6日、この技術を他のプロダクトに反映した結果を明らかにした。今回取り上げたのは、同社の中で最もトラフィックの多いgoogle.comの検索結果ページに関するもの。 当然、ほとんどのユーザーが気にするのはページの上に表示されるコンテンツである。しかし、Googleが明らかにしたこのビデオで面白いのは、ユ

    グーグル、UI改善に利用のアイトラッキング技術を明らかに
    flakwing
    flakwing 2009/02/10
  • ページ作りに欠かせない便利なコントロールがまとまったページ:phpspot開発日誌

    30 Essential Controls ページ作りに欠かせない便利なコントロールがまとまったページが紹介されています。 自動キーワードサジェスト、カルーセル、グラフ、パネル、アコーディオンといった30種類にもわたる基的なコントロール、それぞれにおいて、何を使えば実装できるのか?をまとめられていて便利です。 例えば、自動キーワードサジェストで言えば、 Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight で使えるよ、といったことがまとめられてます。 FlexやSilverlightといった、JavaScript以外の要素も入っている点に注意ですが、この早見表で、これとこ

  • フォームのユーザビリティに貢献するjQueryプラグイン:phpspot開発日誌

    Top 10 jQuery plugins for Form Usability ・Steve Reynolds フォームのユーザビリティに貢献するjQueryプラグイン。 入力制限やヒント表示といったフォーム入力に関する便利プラグインが色々と紹介されています。 AlphaNumeric アルファベット&数字のみに入力を制限する JTip 入力ヒントボックスの設置 Password Strength Indicator パスワード強度の表示 Ajax Username Checker 使えるユーザ名か、ajaxでチェック Geogoer VChecks チェックボックスをファンシーなデザインにした上で押しやすくする 全部見る ブラウザが対応していなかったりすると、ユーザビリティ以前に使えないということになりかねませんが、そこら辺を検証してうまく使えばよいフォームが作れそうですね。 関連エン

  • リッチインターネットアプリケーションの実装時に検討したい30のUI

    でも近日発売の「Designing Web Interfaces」から、リッチインターネットアプリケーションを作成するための30のユーザーインターフェイスを紹介します。 30 Essential Controls サンプルは、一部jQueryベースのものに変更しています。 01. Auto Suggest

  • IDEA * IDEA

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

    IDEA * IDEA
  • 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
  • User Interface Guidelines - Eclipsepedia

    Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

  • ユーザーにとっては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
  • Windows ユーザー エクスペリエンス ガイドライン

    This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

    Windows ユーザー エクスペリエンス ガイドライン
    flakwing
    flakwing 2008/08/05
    VistaのUIガイドライン
  • インターフェースの左右 走査するか操作するか - 最終防衛ライン3

    OKボタンの位置はどこが適切? 「OK」「キャンセル」、どちらが先か? やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん!(Hatena) はまちちゃんの記事は「OK」を右に統一しようぜ!Windows の「OK」ボタンが左なのは訴訟対策だよねって内容。ユニバーサルとして統一した方がユーザーは扱いやすいですが、問題は「OK」ボタンは左にあった方が使いやすいのか、右にあった方が良いのか、どっちなんだい!ってことですね。というわけで、色んなボタンの右左を例に挙げて考えて見ましょう。 以下断りを入れない限り、視点は使用する人から見て右にあるか、左にあるかである。 ゲームコントローラ Where Gamers Do More Than Just Play - HaHaUK: Evolution of the Controller 僕がゲーム好きなので、ゲームコントローラの左右を語るが、ファ

    インターフェースの左右 走査するか操作するか - 最終防衛ライン3
    flakwing
    flakwing 2008/06/15
    UIについての考察。OKボタンを右・左のどちらに配置するか。
  • 第11回 PCサイトとこんなに違う!携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド

    その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能

    第11回 PCサイトとこんなに違う!携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
  • ページ送り部分のデザイン研究:phpspot開発日誌

    Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine ページ送り部分のデザイン研究。 SmashingMagazine にて様々なサイトのページ送り部分を色々とまとめたエントリが公開されました。 なるほど、ページ送りといえど様々なデザイン方法があるようで、勉強になります。 色々なサンプルを見るうちに、自分のサイトのページャーはどんなのが合うか?といったことも分かってきそうです。 PHPでページャーを作る場合は、「PEAR :: Package :: Pager」を使えば簡単に作れます。

  • Tag Cloudのスタイル - 3ping.org

    タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って

  • ユーザーエクスペリエンスを考える上でのおすすめの15冊:DESIGN IT! w/LOVE

    不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 Web標準の日々のセッションでも何冊かご紹介しましたが、あらためてここでユーザーエクスペリエンスのデザインを考える上でのおすすめのをいくつか紹介しておきます。 さっき「ユーザーエクスペリエンスとイノベーションのデザイン」なんてエントリーも書きましたが、ユーザーエクスペリエンスだとか、デザインによるイノベーションなどを考えている方は、このあたりはいちおおさえておいたほうがよいかと。 ビジネス書まずはビジネスサイドで経験価値、ユーザーエクスペリエンスがどのように注目かを知るための3冊。 経験経済/B・J・パインII、 J・H・ギルモアコモディティ、製品、サービスに続く第四の経済価値としての経験について取り上げたビジネス書。顧客の体験を「演劇」というメタファーを用いて説明してい

  • CSSデザインできるスクロールバー表示JavaScript (fleXcroll) - youmos

  • パンくずリストのマークアップを色々考えてみる

    久々普通のエントリーだ。 なんか、デジパの中の人が、Web標準の日々に出ちゃうらしいです。 この人→ネットのサラダボウル: Web標準の日々に参加します。 皆色々やってるなぁ~、ボクも負けてられんなぁ~ ソレとは関係ないけど、デジパの社員は半分くらいの人がブログ書いてるんすけど、B to A 赤坂で働くWebコンサルタントの日記とかのエントリーで逆立ちって。。。。 皆色々やってるなぁ~、ボクも負けてられんなぁ~ さて、そろそろ題に。 以前のエントリーでパンくずリスト(Topic Path)を作成する際に使えそうなサンプル8種ってのを書いたんだけど、その後色んなサイトで書かれてたパンくずリストのエントリーや、コーディングコンテストのソース覗いてたりして、今後どうやってマークアップしてこうかなぁ~って悩んでた今日この頃。 そんな訳で、良いか悪いかは別として色々考えてみた。 ul要素でやってみ

    パンくずリストのマークアップを色々考えてみる