10 Rules For Efficient Form Design
Forms is the one of the most important type of interaction for users on the web and in the apps. They are used everywhere — for registration, subscription services, customer feedback, checkout, to initiate transactions between users and companies, or as data input to search or share information. Developers should pay special attention to improving their forms and making them as usable as possible,
Loading webfonts with high performance on responsive websites
Once upon a time every website was only using Arial, Verdana, Garamond or Times New Roman for rendering the text, because these font were the only ones reliably installed on almost any computer. But these times are over. Webfonts are spread all over the internet, but we still don't really know, how to load them efficiently. Here is my simple guide on what to do, to offer the optimal user experienc
ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Tough & Competent - Strategically-Driven Digital Marketing
Strategy & Brand Management for Digital-First OrganisationsThe humble tortoise. It's not the obvious choice for any situation. It isn't fast. It's not woman's or man's best friend. You can't teach a young tortoise new tricks. Yet the humble tortoise is not without merit. It's dependable. Tough. Competent. Steady. Long-lasting. That's why we like it. A good idea, executed consistently and intellige
モバイルサイトのパスワード入力についての調査 - ウェブユーザビリティ.JP
携帯電話用サイトでのパスワード入力について、ビービットさんのコラムにこんな記事が掲載されていました。 パスワードを英文字も含めて設定してもらう場合には、テキストエリアには「INPUT type=”password”」ではなく「INPUT type=”text”」を使うことをお勧めします。 （中略） 弊社のユーザ行動観察調査の中では、入力中から「*****」という表記になることで、打ち間違いが容易に発生することがわかっています。 from 成果を上げる携帯サイトのフォーム設計＠beBitユーザビリティ実践メモ 確かに、携帯サイトを利用する際に、パスワードが****のようなアスタリスクで表示されてしまうと分かりづらいと感じていましたが、実際自分で携帯サイトを製作するにあたって、input type=”text”で実装してしまってよいのか悩んだ事もありました。 携帯なので、端末を共有したり、覗き
返信しやすいメールのフォーマットを考える (ユーザビリティ実践メモ)
メールを使ったBtoCコミュニケーションとして、多くのユーザに対して認知・集客を目的とするメールマガジンが一般的に挙げられます。 一方、比較的、対象人数が少ないセミナー・説明会の応募受付や面接など1対1のコミュニケーションの場合、企業側から送付したメールに対してユーザに「メールで返信を求める」形が考えられます。 今回は、弊社のユーザビリティテスト（ユーザ行動観察）から得られた知見から、「より返信しやすいメール」の作り方を考えてみましょう。 ある企業では、自社サイトからエントリーした採用希望者に対し、個別にメールを送り、１次面接のスケジュール調整を行っていました。 そこで、それに近い状況をテストするため、複数のパターンのメールを用意し、就職活動の中でユーザがそれらのメールを受け取ったという想定で行動観察を行いました。 まず、「メールを開封するかどうか」という場面では、本連載でも以前ご紹介した
第1回 "IAって何するの？" がわかる「IA One Sheeter」 | gihyo.jp
「IA」という言葉が、Web業界の中で皆さんに認知されるまでにはまだまだ時間がかかりそうです。ここで言うIAとは「情報アーキテクチャ」のことを指します。 Webサイトを構築する上で、欠かせないのがこの情報アーキテクチャだと言われてます。簡単に言うと、Webサイト全体の設計図であり方針です。その設計図や方針を具現化するためには、やはり伝えるための手段が必要になります。 この連載では、伝えるための手段としてのツール紹介や、伝えるために必要なヒントを中心に、Webサイト構築に関わる方々に有益な情報をお届けします。 IAについて 「IA」そのものについての説明は割愛しますが、ひと口に「IA」と言っても以下の2つの意味があります。 Information Architecture：情報アーキテクチャ（分野） Information Architect：インフォメーションアーキテクト（スキル） とくに
マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ)
しかし、プルダウンでの項目選択を行う入力フォームにおいては、この便利さが逆効果になる場合があります。弊社のユーザビリティテスト（ユーザ行動観察調査）で観察された例をご紹介しましょう。 1ページの入力項目が多く、何度かスクロールしなければ「次へ」のボタンまでたどり着けない入力フォームを使うという作業で、ほとんどのユーザはホイールを使いながら入力を進めて行きました。 その中で、あるユーザがプルダウンの項目を選択し終え、ページをスクロールして次の項目へ入力を進めようとホイールを操作したところ、直前に入力したプルダウンにまだフォーカス（ハイライト）が当たった状態であったため、選択項目が別のものに変わりました。つまり、ホイール操作がページのスクロールではなく、プルダウン内の選択項目の移動に使われたということです。 ユーザはページがスクロールしないことにすぐ気づき、ページ内の空白部分をクリックしてプル
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
実践！Webユーザビリティ研究室： 理論編：その3ユーザーテストの実施方法（前編）
ユーザビリティ調査のキモといえば、なんといってもユーザーテストです。一般のユーザーを被験者として招き、実際のWebサイトを操作してもらうことにより、運営側や制作側が見落としていた様々な問題点を抽出することができます。 正しく使われて当たり前と思っていたインターフェイスがことごとく使われないのを目撃すると、たいていの人はカルチャーショックを受けます。これらのデータは、Webサイトを使いやすく改善するための貴重な資料となるのはもちろんのこと、Webの運営や制作に携わるスタッフを一回りも二回りも成長させてくれる経験としても価値があるものです。 しかし、ユーザーテストの運営は一見ハードルが高く、何かと尻込みされがちであることも事実です。そこで今回は、個人もしくは社内のスタッフが中心となってユーザーテストを独力で実施する際のポイントを、みなさんにご紹介したいと思います。今回は前編として、準備段階のプ
みんなの公共サイト運用モデル 誰でも使える地方公共団体ホームページの実現に向けて
「みんなの公共サイト運用モデル」は、高齢者や障害者を含む誰もが地方公共団体のホームページやウェブシステムを利用することができるよう、ウェブアクセシビリティの維持・向上を実現するための取組モデルです。（全体像は以下のとおり。） このモデルは、平成１６年１１月から「公共分野におけるアクセシビリティの確保に関する研究会」（座長：市川 熹（あきら） 千葉大学教授）において検討が進められ、平成１７年１２月に策定・公表されました。
顧客の機能要求に折れないこと!
Kathy Sierra /青木靖 訳 2006年5月10日 製品やサービスが成功するほど、ユーザの要望を受け入れるようにというプレッシャーは強くなる。ユーザが多くなるほど、要望の範囲は広がっていく。あるユーザにとっての ｢それがないんだったら買わない｣機能が、別のユーザには取引をぶちこわすものになる。そしてあなたの製品やサービスが人気になるほど、そういった要望は、要求と最後通牒へと変わっていき、ついには痛烈な批判になる。 私たちになしえる最悪のことは、それに折れるということだ。しかし要望/要求や批判が強く、怒りを帯びたものになるほど、誘惑に抵抗するのは難しくなる——｢この1個だけ付け加えれば･･･きっとあの連中もおとなしくなってくれる｣ しかしあらゆる色を1つに混ぜ合わせて泥色のしみを作るなら、誰も私たちのすることを嫌わなくなるが、同時に誰も喜びも、興奮も、魅了もされなくなる。そうして私
Windows Vista時代を快適に過ごす環境【第一回：ワイド液晶編】
いよいよ発売が30日に迫ったWindows Vista。5年強ぶりに主流OSが刷新されるとあって、非常に注目を集めていることはここで述べるまでもないだろう。Windowsが新しくなるたびに、厳しいハードウェア要求に悩まされてきたわけだが、今回のWindows Vistaも同様のようだ。そこで、ここでは3回に渡り、主にビジュアル面からWindows Vistaを快適に使うために利用したいハードウェアを挙げていきたい。まずは、ワイド液晶である。 ●テスト環境とGeForce 8800 GTXのドライバについて まずは、今回利用するハードウェア環境を紹介しておきたい。今回のWindows Vistaの試用にあたって、 CPU：Intel Core 2 Quad Q6600 マザーボード：ASUSTeK P5B(Intel P965) メモリ：DDR2-800 1GB×2 ビデオカード：NVIDI
面白いゲームの作り方：萎えさせない為の操作説明 島国大和のド畜生
アクションRPGがあったとして。 たとえば、「レバー1回転＋Ａボタン」で周りの敵をなぎ払う、必須な技があったとします。 この操作をユーザーに教える方法として良いのはどういうものか？ 一応、自分なりの考えがまとまったら、続きを読んでみてください。 ①・隠しコマンド 「気付いた人だけ使えます。」 ②・説明書 「レバー1回転＋Ａボタンで周りの敵をなぎ払います。」 ③・アドバタイズ ゲーム開始前、アニメ-ションによる説明付き。 「レバー1回転＋Ａボタンで周りの敵をなぎ払います。」 ④・街の老人 「レバー1回転＋Ａボタンで周りの敵をなぎ払う必殺技じゃ！覚えておくが良い！」 ⑤・街の子供 「レバー1回転＋Ａボタンで周りの敵をなぎ払う必殺技だって？見せて！見せて！」 ⑥・戦闘開始前に 敵集団 「わはははは。ワシらの弱点が、レバー1回転＋Ａボタンとは思うまい！」 ⑦・戦闘中に 主人公を囲んでボコボコにし、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
could
使いやすさ日記: 539. 各社バラバラ！ブログのページ送り文言とルール』
Project83 Blog - Commentary on web development, standards and small business » Design Gallery: eCommerce Progress Bars
photoshop evolution.jpg (image)
ソシオメディア | UIデザインパターン
