UIとwebに関するooooooooのブックマーク (53)

  • FavIconX

  • UI: アウトプットとインプットをあわせて提供する - ワザノバ | wazanova

    https://www.youtube.com/watch?v=xAKnPtbfNfY 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 1日前 メール入力フォームの工夫に関するLuke Wの3分間の短いビデオです。 メールの入力フォームは、15%が入力エラーになることが知られているので、確認用のために2回入力をしてもらう仕組みにしているケースが多い。 その他の手段としては、例えばユーザが、”luke@gnail.com” と入力した際に、inline validationを利用して入力フォームの下に、”Did you mean luke@gmail.com” と表示をだす。”gmail.com?” の箇所がハイライトされていて、そこをクリック/タップすると入力フォームの内容も自動的に修正される。これで、入力エラー

    oooooooo
    oooooooo 2014/07/19
    “メールの入力フォームは、15%が入力エラー”
  • Personal names around the world

    Question How do people's names differ around the world, and what are the implications of those differences on the design of forms, databases, ontologies, etc. for the Web? People who create web forms, databases, or ontologies are often unaware how different people’s names can be in other countries. They build their forms or databases in a way that assumes too much on the part of foreign users. Thi

    oooooooo
    oooooooo 2014/07/09
    東海林賢蔵
  • ページャNight 1ページ目という勉強会やりました - その手の平は尻もつかめるさ

    そういえば昨日「ピクシブ株式会社」って言おうとして3回くらい噛んだ気がする— プリントゴッコ (@moznion) 2014, 7月 5 ページャNight,僕が当初想定していたよりも1000倍位有益な会になって当に嬉しかったです.あとで記事等書きます.— プリントゴッコ (@moznion) 2014, 7月 5 録画したustの様子はこちら http://www.ustream.tv/recorded/49544381 ページャNight <[1]> on Zusaarというイベントを開催致しました. 実に冗談みたいな理由から興ったイベントでしたが,ページャ (ページネーション) というWebサービスの1コンポーネントに焦点を絞った非常に濃厚かつ興味深いトークの数々を聞くことができて,非常に良い勉強会になったと思います. 以下,発表の一覧です. 15分トーク @mizchiさん お前

    ページャNight 1ページ目という勉強会やりました - その手の平は尻もつかめるさ
  • Epoch by Fastly

    Epoch A general purpose real-time charting library for building beautiful, smooth, and high performance visualizations. Download v0.5.2 Built for Developers Built with developers in mind, making it easy to extend and adapt charts to your particular domain.

  • 背景を止められない不自由なインターネット - hitode909の日記

    きのうの日記、背景が動いて見てられないっていう感想が大半だった。これは悲しいことで、昔なら、さらっと背景を止めるUserScriptでも書いて、背景止めてから落ち着いて読めてた。 最近は、iPhonetwitterクライアント内蔵ブラウザなど、ユーザーが手を入れられないブラウザが増えている。PCのブラウザも手を入れにくくなっていて、Firefoxだと右クリックでGreasemonkey書けたりしていたのが、Google ChromeではUserScript書きにくい。 これは寂しいことで、インターネットは皆の物だから、自分のブログを好きな見た目にするのも、他人のブログを好きな見た目で読むのも、勝手にできていいはずだと思う。俺たちのインターネットを取り戻したい。 photo by dalbera 追記 嫌がらせで背景を動かしたり、背景止めないと読めないと思ってやってるわけではなくて、背景が

    背景を止められない不自由なインターネット - hitode909の日記
    oooooooo
    oooooooo 2014/05/07
    GIFアニメも止めたい
  • 今どんなボタンが好きかCSSプロパティごとに検討してみた

    下のボタンCSS3を駆使して色々しているのは分かりますが、最近フラットなデザインが流行っていることもあり、何となくあか抜けない気がします。 なぜでしょうか。 ということで、どのようなボタンが好きかプロパティごとで考えてみます。 ボタンの色(background-color) まずはどのような色がよいか考えてみます。背景色によってどの色がよいかは違ってくると思いますが、今回は白い背景色で考えます。 最初に青いボタンです。 色がきつすぎてあまり好きではないです。同じ青系でも薄くてさわやかな色の方が好きです。 緑系も同じです。 濃い緑より薄い緑の方が好きです。 オレンジも同じです。 ということで薄めで明るい感じの色が好きです。 テキストの色(color) 続いてテキストの色について考えます。まずは白。 これが一番いい気しますが、一応いくつかやってみます。では黒。 なんかきつすぎる。次は背景と対極

    今どんなボタンが好きかCSSプロパティごとに検討してみた
  • UI Stencils - Templates & Stencils for UX Designers / Developers

    Drawing Stencils, Pads and Accessiories for Designers & Developers.

    UI Stencils - Templates & Stencils for UX Designers / Developers
  • Flat UI - Free Bootstrap Framework and Theme

    Checkboxes Unchecked Checked Disabled unchecked Disabled checked Radio Buttons Radio is off Radio is on Disabled radio is off Disabled radio is on

  • EVE

     このコンテンツをご覧になるにはFlash Playerのバージョン8以降が必要です。

  • Webサイトで全角英数字ではなく、半角英数字を採用する理由

    Webで文章を掲載する際、英数字は半角表記で統一するのが「常識」です。ですが、なぜ全角英数字はダメで半角英数字に統一するべきなのでしょう。改めて聞かれるとついつい「そういうものだから」と答えてしまいがちではないですか? また、検索してみても、ちゃんとまとめられた記事がなかなか見つけられません。ということで、全角英数字ではなく、半角英数字を採用する理由をまとめてみました。 ※記事は技術的な検証が十分に行われておらず、誤った情報である可能性があります。あらかじめご了承ください。 全角英数字は再利用性できません たとえば、電話番号やURLが全角で表記されていると、Office製品やメーラーでリンクとして認識されません。ブラウザのアドレスバーにコピーアンドペーストしても開けず大変不便です。 全角英数字は禁則処理が行われません ブラウザでは英単語が途中で改行されないよう折り返しが行われます(禁則処

    Webサイトで全角英数字ではなく、半角英数字を採用する理由
  • eBay でヒドいデザインの方がコンバージョン率が高かった、という話

    先日日WEBデザインが2003年で止まっていると話題にという記事で楽天のサイトなどのことが取り上げられていましたが、これを読んで思い出したポッドキャストインタビューがあったので一部抜粋してみます。 このインタビューはスタートアップ向けレクチャーイベント ZURBsoapbox シリーズのひとつ。昨年11月に、「サンフランシスコでの投資とギークな日々の20年間」といったタイトルで 500 Startups 代表のエンジェル投資家デイブ・マクルーア氏が語ったものです。 「チームのメンバーに求める特徴は?」という客席からの質問のデザイナーの部分について、彼はこのように答えていました。 一緒に働くのが辛いデザイナーもいた。自分はなんでも知ってる、みたいなデザイナーと働くのにはほんとに苦労した。デザイナーと口論したいわけじゃないんだ。俺が見たいのは数字とお客さんの利用例。そして何がうまくいってい

    eBay でヒドいデザインの方がコンバージョン率が高かった、という話
    oooooooo
    oooooooo 2012/10/08
    楽天、ドンキ、Amazon
  • ホームページデザインの変化

    Webデザインは安定している。平均的なホームページは1年前の状態から約40%しか変わっていない(完全なデザイン変更には2年半かかることになる)。 Homepage Design Changes by Jakob Nielsen on September 24, 2012 日語版2012年10月5日公開 私たちは19年間、さまざまなホームページのスクリーンショットを1年に1度収集してきた。スクリーンショットを各々、前年のものと比べれば、ホームページのデザインの年率変化率を見積もることができるからである。 では収集期間を通しての典型的な例をいくつか見ていくことから始めよう。 1994年から1995年にかけてのMicrosoft: 100%の変化 これらはウェブ創世記における古典的なホームページである。つまり、図とデザインを多用し、GUI(グラフィカルユーザーインタフェース)に関する伝統的な約

    ホームページデザインの変化
  • ビジュアライゼーションは「情報を見つける」ための行為 - WirelessWire News(ワイヤレスワイヤーニュース)

    携帯電話向けの日語予測変換機能「POBox」の開発者としても知られるユーザーインターフェース研究者の増井 俊之氏を講師に迎え、情報を見いだすためのビジュアライゼーションをテーマにしたセミナー「"想定外"を発見するためのビジュアライズ・テクニックの使い方(主催:日経BP社)」が開催される。2011年秋に出版された書籍「ビューティフル・ビジュアライゼーション」(オライリージャパン/オーム社)の監訳者でもある増井氏から見た、ビジュアライゼーションの現状と課題について、話を聞いた。 増井 俊之(ますい・としゆき) 慶應義塾大学 環境情報学部教授。1959年生まれ。ユーザーインターフェース研究。POBox、QuickML、棚.org、Gyazoなどのシステムを開発。ソニーコンピュータサイエンス研究所、産業技術総合研究所、Apple Inc.など勤務を経て現在慶應義塾大学教授。著書に『インターフ

    oooooooo
    oooooooo 2012/06/15
    グラフ以外に、Web サイトもアプリも、もかっこいいだけ、実用的なだけじゃなく、かっこよくて使い勝手がよくないと
  • ふつうのformをつかいたい - はまちや2 - ニコニコ超会議2012

    こんにちはこんにちは!! はまちや2 (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう? プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 日のテーマ: 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…(はいはい) フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた!) (これで送信、と…) ※エラー:住所を正しく入力してください (え、なんで!?) ※住所は全角で入力してく

  • Home - Pencil Project

    An open-source GUI prototyping tool that's available for ALL platforms. Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. The latest stable version of Pencil is 3.1.1 which contains stability fixes and many new features. More details can be found in the release notes. Proje

  • パスワード入力欄に必須!キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン:phpspot開発日誌

    パスワード入力欄に必須!キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン 2011年07月05日- Caps Lock jQuery Plug-In キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン パスワードの入力の際なんかにCAPS LOCKがONになっていると正しいパスワードを入れたつもりがちゃんとはいってないなんていうことも結構ありますね。 そのような問題を解決するのがこのプラグインです。jQueryでその状態をチェックし、アラート等を表示することが出来ます 例えば次のように設定すれば、input type="password" の場合でCAPS LOCKがONの場合にalertをあげられます。 デモページはこちら 関連エントリ 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelect

  • WD101: Webは見た目のコントロールがきかない

    このシリーズでは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 DTPという名の足かせ Webデザインはよくも悪くも DTP のノウハウを受け継ぎながら徐々に成長してきた領域です。今でも根強く残っている「ページ」という概念。タイポグラフィ・グラフィック・レイアウトなど DTP が培ってきたノウハウは CSSHTML (ときどき JavaScript)を使って再現されたりしています。DTPの概念とノウハウがなければ Dreamweaver のようなソフトは生まれなかったでしょうし、Dreamweaver のようにコードを手打ちしなくても DTP 感覚で Web デザインに入り込めるソフトがなければ、Web デザイナーを職業とする方もこれほど増えなかったかもしれません。 しかし、D

    WD101: Webは見た目のコントロールがきかない
  • Little Big Details

    Twitter — When you lose your internet connectivity, you’ll get an option to copy the text that you’ve typed to DM someone on Twitter.

    Little Big Details
  • 秋元@サイボウズラボ・プログラマー・ブログ : ダークパターン - ユーザーを騙そうとする悪いウェブデザインに名前をつけて共有するサイト

    DarkPatterns.orgは、Webデザインを悪用するブラックハット・デザインを無くすことを目的に、わざわざ分かりにくかったり、望んでいないこと実行させるようなデザイン要素に共通の名前(パターン)をつけ、それを使っ […] DarkPatterns.orgは、Webデザインを悪用するブラックハット・デザインを無くすことを目的に、わざわざ分かりにくかったり、望んでいないこと実行させるようなデザイン要素に共通の名前(パターン)をつけ、それを使っている不良サイト・企業に文句をつけるための新しいサイトです。 たとえば、パターン「買い物かごに忍び込ませる(Sneak into basket)」パターン。これは、ユーザーが入れていない商品がいつのまにかショッピングカートに紛れ込むようにデザインされているフォームのパターンです。 例として、旅行予約サイト大手のTravelocityで、ホテルや飛行