Yahoo!ニュースの見出し行間「5ピクセルの差」に見えた光～ヒートマップでUI改善
社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系「カンブリア宮殿」。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 （放送バックナンバー：爆走する国民的サイト！これがネットの底力だ！－ テレビ東京） 公式ブログ新コーナー「news HACK」ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例（※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください）。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
入力フォームの工夫 - ワザノバ | wazanova
http://googleresearch.blogspot.com/2014/07/simple-is-better-making-your-web-forms.html 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 今回、Googleのチームが、アイトラッキングシステムの利用やユーザインタビューを通じて、入力フォームのユーザビリティについて実験しています。参照しているのは、2010年にスイスのUniversity of Baselのチームがまとめた "20 guidelines to optimize web forms" です。2000年代のアカデミックな研究成果をもとにまとめられたものですが、現在もまだ当てはまるものと、ここ5-10年で変わってきているものがあり、興味深いです。最近は、スマホ
ブラウザにはウェブページの日付を一定の場所に表示してほしい - Random Thoughts
私には、ウェブ記事を読むときに、まず日付を確認する習慣があります。このことは私にとっては「最低限の情報リテラシー」に思えます。なぜならば、その情報が「いつ書かれたものであるか」は、非常に重要なコンテキストあるいはメタ情報だからです。なぜ日付が重要かというと、「書かれたあとに知られた情報は、反映されていない」ことを意味しているからです。 現代の情報は評価が変遷しがちです。数年前の記事に書かれたことが、現在の「常識」から見ておかしいことなど日常茶飯事です。代表的な例としては、遠隔操作ウイルス事件やSTAP事件などがあります。それまで「事実」として語られていた内容が、ある時点を境に「誤り」になることは日常茶飯事です。したがって、記事の内容を解釈するにあたっては、記事の日付を考慮しなければなりません。さもなくば、私たちは誤った結論に達してしまう恐れもあります。 この点について人々がどうしているか想
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
スマートフォンサイト制作で「なんで拡大縮小できるようにしてるの？」と言われた時の対処法
※ この話はフィクションです。実在の人物や団体などとは関係ありません スマートフォンサイトを制作していて、「サイトを自由に拡大縮小できるようにしてるのは理由あんの？」と言われた時の場合の話です。 Viewportの設定どうしてたか <meta name="viewport" content="width=device-width"> これだけ。こうするとサイトの幅=デバイスの幅になり、拡大縮小は自由にできる。 対処法1：話し合うそもそもブラウザにデフォルトで備わっている拡大縮小機能を無効にするのがおかしいなぜ拡大縮小を無効にするのか ネイティブアプリ感を出したい拡大縮小した時に表示が崩れるのを防ぎたい拡大した時に画像がボヤけるのが嫌例えば構成/デザインの上で小さな文字を使わなくてはならない場合、ユーザーはどうやってその文字を拡大するのかユーザーが拡大したいと思っても拡大が禁止されていたら、
徹底考察！フォームをエンターキーでサブミットするのは、是か？それとも非か？ | WP-E (仮)
こんにちわ、@se_inoです。 前回の記事に頂いたはてブコメントやtwitterで「フォームをエンターキーでサブミットするのが良いか悪いかは判断が難しい」というのを チラチラと見かけたので、今回はそれについて自分の考えを書きたいと思います。 結論から述べますよ 勿体つけず結論から言いますと、そんなものは場合によるということです。 どういうことなのか まずそもそも、フォームとは一口にいうものの、色々と種類があるということは、皆様ご存知のとおりだと思います。 ざっと思いつくだけでも、以下のようなフォームがありますね。 ログインするためのフォーム 申し込みや問い合わせのフォーム 投稿をするためのフォーム 情報を登録・修正するためのフォーム 検索フォーム つまり、これらを一緒くたに「フォーム」と呼んで、それに対して是か非かを問うのは そもそも、フォームの項目や目的がそれぞれ全然異なっているので、
入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善
入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善
UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ - コムテブログ
TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof
maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！ - Qiita
今日自分が体験したトラブル事例に、ユーザビリティ向上のための気づきがあったのでメモしておきます。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 事例：登録時のパスワードでログイン出来ない！？ 今日、とあるWEBサイトでユーザ登録を行った際に、登録時に入力したパスワードでログイン出来ないというトラブルがありました。 普通は自分の入力ミスを疑うところですが、登録もログインもコピペで入力しているので入力ミスはありえ無いと思っていました。 お問い合わせフォームからバグ報告 というわけでこれはバグだろうと、お問い合せフォームから以下のような内容の報告
<input> 要素の type 属性を使ったフォーム入力支援 | Accessible & Usable
公開日 : 2013年4月21日 (2020年8月30日 更新) カテゴリー : ユーザビリティ Web サイトのフォームの入力要素のうち、<input> 要素は、type 属性の記述によって、テキストボックス (type="text")、パスワード入力欄 (type="password")、チェックボックス (type="checkbox")、ラジオボタン (type="radio")、といった種類を指定することができます。 そして HTML5 では、<input> 要素で使用可能な type 属性値が新たに追加されています。ユーザーが使用するデバイスによっては、この type 属性値に応じた入力しやすいユーザーインターフェース (UI) が提供されるので、「気の利いた入力支援」が可能になります。 たとえばスマートフォンやタブレットのように、入力要素にフォーカスが当たるとタッチスクリーン
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
JavaScriptによる自動振仮名入力·autokana MOONGIFT
autokanaはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 フォーム入力というのはユーザにとって相当なストレスになります。ちょっとでも面倒だと思うと諦めてしまいます。そこでなるべくユーザのストレスを減らして入力できるライブラリを用意すべきです。今回はフリガナ入力補助ライブラリautokanaを紹介します。 “な”と入力すると、ふりがなの欄に“ナ”と自動入力されます。 続けて入力して変換。ナカツガワときちんと入力されました。 例えばミスしてバックスペースを押せば、フリガナもその部分が削除されます。 振仮名ではひらがな、片仮名の両方が利用できます。KeyDownのイベントを使っていますので、コピー&ペーストされた文字列に対しては動作しません。また、現時点ではローマ字には非対応とのことです。 MOONGIFTはこう見る 入力フォームは総じ
Webの入力フォームデザイン入門
Webの入力フォームデザイン入門 Presentation Transcript Webの入力フォームデザイン入門 2013-08-30 関西エンジニア＆クリエイターのためのHTML５勉強会 川田 寛 Hiroshi KAWADA 講演者プロフィール Web技術者コミュニティ html5jえんぷら部 部長 某SIのWeb系エンジニア 九州生れ 関西育ち 関東在住 slideshare.net/kawada_hiroshi @kawada_hiroshi1 入力フォームは奥が深い 自信を持って 答えることができますか？ Question 1 項目のグルーピング Q1. 最もユーザストレスの低い 入力項目のグルーピングは？ 1. Text length(入力文字数) ⃝✕△ ⃝✕△ ⃝✕△ ⃝✕△ ⃝✕△ ⃝✕△ Q1. 最もユーザストレスの低い 入力項目のグルーピングは？ 2. Requir
ここに書いたらダメ、ゼッタイ！入力フォームの注意書きを確実に見てもらう方法とは？ | マミオン有限会社-パソコン・数学研修、法人研修
シニア層のユーザーテストを観察していると、その多くが同じところで失敗しているのを目にします。 よく失敗するポイントの一つが、ユーザーが入力規則を把握していないことによるフォームへの入力エラーです。「メールアドレスは半角で」「パスワードは〇文字以内で」「住所はマンション名まで含めて」…などなど。 インターネットの利用に慣れた人の場合、そうした注意書きに気付かずに入力してエラーが出てしまっても、そのエラー説明を確認してすぐに修正することができます。一方でシニア層ユーザーの場合は、こうしたエラーに対してなかなか自分ひとりで対応することが難しく、入力エラーを起こさないための準備の重要性がより高くなってきます。 こうした注意事項の伝達不備は、なぜ起こってしまうのでしょうか？今回は、ユーザーがどこを見ているかを分析できるアイトラッキング（アイカメラ）を使って確認してみます。 入力フォームの「右側」は、
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
柏市と所沢市のホームページがすごい | モトシロブログ
自治体のホームページで重要なのは知りたい情報にどれだけ分かりやすく簡単にアクセスできるかということだと思うのですが、だいたいの自治体ホームページは２ページ目からはメニューがただダーッと並んだ文字だらけになって「こっから勝手に探してくれろ」って感じなのが多いです。 藤沢市のホームページにいたっては、このリンク一覧は「新着情報（お知らせ）のタイトル」なのか「メニュー項目のタイトル」なのかすら分かりづらい。 そんななか、とても分かりやすく情報にたどり着けるシステムを導入している自治体のホームページを発見することができましたのでご紹介します。 それは、柏市と所沢市です。 メニューを選んで行くとページにアクセスできる 柏市のすごい機能はトップページのカバー写真の部分のメニューを選択していくだけで目的の情報が書いてあるページにアクセスできるところです。これは分かりやすくて簡単で早くて便利です！ 次に紹
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エントリーフォーム最適化15か条の1：入力フォームの最初の項目を入力しやすくするだけでユーザーの直帰は減らせる | 勝手にEFO分析-エントリーフォーム改善 | Web担当者Forum
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。