Modern UI のようなフラットデザインを目指して使いづらくなっている件について | DevelopersIO
Windows 8 がリリースされてだいぶ日が経ちました。最大の特徴と言ってもよい Modern UI *1。モバイル端末をはじめとしたタッチデバイスに特化した大きめのタイル（ボタン）とタイポグラフィが一際目を引くデザインで、OS X や iOS のそれとは一線を画しています。 一方の Android。2011年2月にバージョン3.0である Honeycomb がリリースされ、それまでの 2.x から刷新したデザインになりました *2。2013年4月現在の最新バージョンである4.2（Jelly Beans）もこの流れを踏んでいます。 両者ともそれまでの Web2.0 と呼ばれていた頃に流行ったグラデーションやドロップシャドウをふんだんに使ったデコラティブなデザインに対し、平面的で装飾要素の極めて少ないミニマルなデザインが特徴です。これらは主に Flat UI と呼ばれ、2012年頃から現在
クリック率・コンバージョン率を高めるボタン。3つの大きなポイント
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
アイコンの役割や使い方をおさらいする
リニューアル後のGmail、そのアイコンの意図がわかりづらくて、使いづらいなーと思ってました。 なので、どうしてわかりづらいのか、とか、アイコンの意図が読めないとどうなるのかを考え、またアイコンって重要だなと再認識したので忘れないようにエントリです。 そもそも、アイコンの役割とは？ そもそものアイコンの役割とは、機能などを絵（グラフィック）におきかえて、わかりやすく示すことです。 ただ、絵というのは、意味の伝達が多義的になります。 それが大きな利点でもあるのですが、機能を示すために使うときは、意味が一義的になるようにする必要があります。 ユーザーを混乱させないようにする ユーザーがアイコンから意味をうまく読み取れないとき、迷って時間がかかってしまったり、最悪使うこと自体をやめてしまうかもしれません。 そのような機会損失を防ぐために、アイコンの使い方を考えたり、意味の明瞭なアイコンを作成する
WEBシステムのデザインについて今の会社を退職する前に私が後輩に伝えたこと
このたび会社を退職することが決まり、デザインについてほとんど初心者である後輩に対して私の思考を託す時が来ました。 私自身WEBシステムの制作を手がけたことはなく（ないのかよ！！と全力でつっこんでおｋ）今度のプロジェクトでうちのチーム初のWEBシステム制作案件があるそうなので、デザインする時のポイントなどを自分なりにまとめてみました。 私は携われないんですけどね＼(^o^)／ 様々なWEBシステムのデザイン よいデザインはデザインをする対象（今回はWEBシステム）のことを知らなければ出来ません。 自分の考えだけでデザインをはじめると、思考の偏った使いにく～いものになってしまう恐れがありますので 必ず調査をしましょう。 そして、何故その要素がそこに配置されているのかを考えましょう。 以下に様々なWEBシステムのキャプチャと 超稚拙で言葉足らずな安易すぎる説明を掲載します。 ですが、掲載されてい
タブ使用時の注意点 (ユーザビリティ実践メモ)
タブによる表示切り替えは、様々なサイトで利用されている便利な機能です。さて、皆さんはタブの使い方が大きく2種類あることにお気づきでしょうか？ タブは便利であると同時に、背後のタブが見られない危険性が伴います。今回は、タブの2種類の使い方にそって、タブ利用時の注意点について考えてみたいと思います。なお、どちらの使い方か明確に分けられない場合は、両方の注意点を参考にするのがおすすめです。 ※タブを利用する際の注意点は過去の実践メモでも取り上げています。 （参考） 「困った時のタブ頼み」（ユーザビリティ実践メモ） まず、一つ目の使い方は、「多数の情報をカテゴリごとに整理して提示する」というものです。 例えば、ニュースサイトでは多数のニュース記事を「総合」「経済」「エンタメ」「スポーツ」というタブを使って分かり易く分類しているのをよく見かけます（図1）。あるいは、衣料品を扱うＥＣサイトでは「レディ
[CSS]ネガティブホバーに違和感アリ、ポジティブホバーのススメ
ポジティブホバーのデモページ ホバー時のキャプチャ [ad#ad-2] ネガティブホバーとポジティブホバーの考察 直感的に 最も大切なことは、間違っているように思われない、ということです。 ホバー時に期待するものとしては、なにかしらの反応があると予想しませんか？ 例えば、ページに遷移するリンクをクリックしようとした際、そのリンクがあなたから逃げてしまうことは望まないでしょう。その箇所に注意が向けられるように分かりやすくなることは、直観的に理解ができるとも言えるでしょう。 この感覚はUIデザイナー・デベロッパーにとって、とても大切ことです。 そして、この直感をもたらすものが、ポジティブホバーです。 どちらがよいのか？ 答えはもちろん、ポジティブホバーです。 ホバー時には、そのアピアランスには加えるようにします。 アピアランスをポジティブにするには、下記の方法があります。 通常時：下線無し 下
見ているだけで楽しめる、オシャレで創造性にあふれたメールフォーム32選
通販での会員登録の際などに名前やメールアドレスといった個人情報を入力することになる「メールフォーム」ですが、ウェブサイトのデザインに比べてあまり凝っていないような気がしている人も多いのではないでしょうか。 ここでは、見ているだけで楽しめるような、オシャレで創造性にあふれたメールフォームを32種類集めています。どのサイトもデザイン性に優れているので、これなら面倒になりがちなメールフォームの入力作業も退屈せずに済みそうです。 メールフォーム32選は以下から。01：ArtFlavours 02：VISMAAd 03：Christian Sparrow 04：Justdot 05：The Spray Studio 06：Ryan Scherf 07：Sandalias XTR 08：SVN2FTP 09：Wing Cheng 10：Denise Chandler 11:Needle 12：fabr
ユーザーを逃さない！海外Webアプリの入力フォームいろいろ
このフォームのポイント！ 上部のボックスでエラー表示 入力時にリアルタイムのエラー判定 それぞれのフォーム下部にエラー文言 項目名を赤く目立たせる
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
noupe - THE magazine for webworkers and site owners
http://e0166nt.com/blog-entry-831.html