入力フォームの操作性、機種による違いにご注意！ | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報
入力フォームの操作性、機種による違いにご注意！|株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報| 携帯サイト開発から生まれる技術情報ブログ 入力フォーム内の項目を横並びにしたり、リンクを追加したりすると、携帯でのユーザーインタフェースに思わぬ影響を及ぼしてしまうことがある。具体的に言うと、機種によってはチェックボックスやラジオボタンを十字キーで選択することが難しくなったりするのだ。 今回は携帯の十字キーの操作性にフォーカスしてみる。 このページの操作性は？ チェックボックスやラジオボタンなどを組み合わせたシンプルなページを用意した（サンプルページはこちら）。HTMLソースは以下の通り（一部抜粋）。 テキスト1<br /> <input type="text" name="t1" value="" /><br /> テキスト2<br /> <input type="tex
「次へ」ボタンの誘惑 (ユーザビリティ実践メモ)
自社商品の強みを伝えるために、頑張ってコンテンツを作ったけれど、なかなか最後まで見てもらえない…という悩みを持つウェブマスターの方は多いのではないでしょうか。 ユーザに「もう1ページ先」を読んでもらうためのちょっとした工夫として、「次へ」というテキストリンクの活用があります。 ベッドなどの家具を販売している会社の事例をご紹介します。 （実際の事例では別の商材ですが、内容は同じです） この会社では、自社商品の強みを自然に伝えるため、「マットレスの選び方」「掛け布団の選び方」というコンテンツを用意しています。 「寝心地のいいベッドがほしい」と思って探しているユーザがこのサイトに訪れた際に、「マットレスの選び方」というコンテンツに気づいて興味を持ってページを見てみたとします。 ページの最後まで読んだユーザは、「掛け布団は今回は買うつもりはないから見なくていい」と思い、次ページには進まず、戻ってし
最適なテキストリンクの色は？ | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ（最終回） | モバイルサイト構築のユーザビリティいろは
2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基本チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる！ モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基本チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな
ウェブサイトをより単純にして、分かりやすくする -Design Simplicity
ユーザーがより簡単にインフォメーションにアクセスできるように、ウェブサイトをより単純にして分かりやすくする「Design Simplicity」を取り入れる方法をWeb Designer Wallから紹介します。 What to Expect in 2010: UX/UI Design Simplicity 下記は各ポイントを意訳したものです。 はじめに 今年も多くのデザイントレンドがあります。しかしながら、私はデザインの単純さ（Design Simplicity）にフォーカスをあわせることが重要であると感じます。 デザインの単純さとは、より少ないページ、より少ないクリック、より少ない取り散らかし、そして多くのホワイトスペースを意味します。そして、我々のユーザーはそれを求めています。 増加するインフォメーションへのアクセスは、ユーザーの集中力低下の原因となります。デザイナーは今まで以上にユ
ユーザーにクリックされやすいボタンデザインの5つのポイント
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
「次へ」「前へ」がどっちに進むのか分からない問題まとめ
@tkml 心底同意 RT @amachang: 「次へ」「前へ」っていうリンクよく見るけど、もっと時間的な前後が分かる言い方ないのかなー。 2010-02-17 10:54:09
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
Ywcafe.net
Ywcafe.net This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Credit Card Application Health Insurance 10 Best Mutual Funds Accident Lawyers song lyrics Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 : LINE Corporation ディレクターブログ
こんにちは、「プチペット」を担当している吉沢です。 最近はモバイルサイトを作成するためのブログやノウハウ本などがたくさん出てきて、とても便利になってきましたね。 個人的にはモバイルサイトのデザインやユーザインターフェース関連に関心が高いので、ブログでは「モバイルデザインアーカイブ」さん、「case:MobileDesign!」さん、本では日々、こちらで勉強させていただいております。 モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 著者：株式会社ゆめみ 販売元：インプレスジャパン 発売日：2008-12-25 おすすめ度： クチコミを見る モバイルデザインアーカイブの本。―携帯Webコレクション 著者：モバイルデザインアーカイブ 販売元：春日出版 発売日：2009-08 おすすめ度： クチコミを見る ケータイサイトのレイアウト 企業・キャンペーン・サービ
iPhone向けサイトのユーザビリティ最適化でチェックしておきたい項目まとめ
iPhoneを始めとするタッチパネル＆フルブラウザ搭載のスマートフォンの普及が進んでいる。iPhoneの出荷台数は世界で3000万台、日本国内に関して公式な発表はないが200万台を超えていると推測されている。今後はWindows Mobile端末の進化やAndroid携帯電話により、このスタイルの携帯端末の利用者がさらに拡大していくことが予想される。 今回は、こういったタッチパネル＆フルブラウザ搭載のスマートフォンからのウェブサイト／サービスのユーザビリティについて、主にiPhoneを題材に考えてみよう。 iPhone対応は形式にとらわれず「ユーザー中心」視点で iPhoneからのウェブ利用には、従来の携帯電話と同様の「携帯性の高さ」「位置情報との連動」などに加え、 従来の携帯電話と比べて画面サイズが広い 端末の処理能力が高く、アプリでのサービス提供の自由度が高い 独自の操作（画面をつまむ
【○×】Q.ユーザが画像をざっと見て良し悪しを判断する商品の詳細ページでは、「左：画像、右：文章」、その下は「左：文章、右：画像」と、画像と文章を交互に配置したレイアウトとする方が、そうでない場合に比べて文章にも目を通してもらえる可能性が高い。○か×か？: beBit.Q
【解説】写真画像で良し悪しを判断しようと考えているユーザの視線は、自然と画像と画像をつなぐ形で流れます。画像と文章を交互に配置することでユーザの視線が散らばり、スクロール速度も遅くなりやすいため、比較的文章にも目を通してもらいやすいレイアウトとなります。 解説詳細 例えば、セオリー通り情報が整理されたきれいなレイアウトを達成しようとすると、以下のようになります。 この場合ユーザは、気になる画像があれば横にある文章にも目を移しますが、基本的にはすーっと下に向かって画像だけを眺めてスクロールするといった行動をとりがちです。 また、単調なレイアウトであるためにユーザのスクロール速度も速くなりがちです。 一方、画像と文章を交互に配置したレイアウトでは、ユーザの視線は以下のように散らばってくれる可能性が高くなります。 この場合はユーザが画像から画像に視線を移すタイミングで自然と文章が視野に飛び込んで
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
フォームの完遂率は、フォーム前の設計で3倍以上変化する、というお話 - Feel Like A Fallinstar
ユーザビリティ系の記事でも何かと人気なのがフォーム周りのお話。 たぶん最終成果に一番近いところにあるから、何だと思います。 でも、一番近いから一番影響が大きい・・・という（ほぼ全国共通の）認識は実はそうでもなかったり。 「フォーム前の設計」でフォームの完遂率なんていくらでも変化する、というお話を少ししたいと思います。 実際にプロジェクトで起こった話を、1つ 最近の安直なランディングページ（※この言葉は嫌いですが便宜上こう書いておきます）なんちゃらの流行（？）のせいで、こんな画面が増えています。 とりあえずサービスの売りがドカンドカン でっかいボタンが画面に何度も何度も現れる ページが長くて字がでっかい 代理店さんがこの1ページを色々ごにょごにょ変えたりしていました。 で、その画面を、しっかりと情報を掲載して来訪者がじっくり納得できるようなページ（群）にしたところ起こったのが下の図のような結
単機能トップページというデザイン手法が人気急上昇中 | Moz - SEOとインバウンドマーケティングの実践情報
最後にデザインの話題を取り上げてからずいぶん経ったけど、そろそろまた書くべき頃合いだと思う。 今回焦点を当てるのは、レトロ（かなり前から用いられている）でありながら今また勢いを増しつつある（少なくとも僕は人気上昇中だと感じている）デザインスタイルだ。もっと具体的に言うと、目的を1つに絞り込んだトップページのことだ。 最初に、簡単な例を挙げる。GmailやYahoo!メールのメールアドレスを入力すると、そのアカウントに登録されている連絡先（知り合い）を、さまざまなソーシャルネットワークで探してきてくれるSpokeoというサービスだ。 このデザインの目的はただ1つ、製品の機能を示すためにメールアドレスを入力してもらうことだけで、そのほかのことには目もくれていない。登録ユーザー向けのログインページやブログ、説明ページへアクセスするリンクといった副次的なリンクが少々と、信用度を高めるのに役立つ大手
実用的なユーザビリティの10のポイント：ガイドライン編 | コリス
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？ 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
could
IDEA * IDEA
