≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
概要 ▶ 2014年のA/Bテストの結果によれば、いわゆるハンバーガーメニューは使わない方が良いという結果に。本ページはプロモーションが含まれている場合があります スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現
ファーストビュー盲信がもうしんどい
Updated 2015.04.27 / Published 2015.04.27 「ファーストビューが全て」のようなファーストビューについては盲信的な記事も多く、ファーストビュー云々のことで煙が立ち始めて、火がついてしまうと、上手く説得を試みようにも聞く耳をもってもらえず、困り果てるディレクター・デザイナーの方も多いのではないかと思います。ファーストビューはもちろん大事ですが、盲信的に傾倒することには疑問を感ぜざるを得ず、ファーストビュー問題はいつになっても考えものです。 ファーストビューのボヤは気付き難い ディレクターやデザイナーの方ならプロジェクトが進行していく中で、ファーストビューが問題になったことが一度や二度はありませんか。「いやいや、ファーストビューはちゃんとガチガチに予防線を張っているよ！」というディレクターの方も、きっと過去に苦い経験があるのではないでしょうか。 個人的にフ
ファーストビューに関するマニフェスト： ページの折り目が今も大事な理由
ページ上部に何を表示し、何を非表示にするかは、画面サイズにかかわらず、常にユーザーエクスペリエンスに影響するものだ。ファーストビュー内に表示されているかどうかで、ユーザーの情報の取り扱い方には平均84％もの差が出る。 The Fold Manifesto: Why the Page Fold Still Matters by Amy Schade on February 1, 2015 日本語版2015年2月16日公開 画面のサイズというのは絶えず変化していくものだが、一定のサイズに合わせるのではなく、デザインによってこうした複数のサイズに対応することは可能である。では、クライアントやデザイナー、開発者、マーケターが「ファーストビュー（：above the fold＝折り目の上）」（紙媒体の新聞から借用した用語で、Webページ上でスクロールをしなくても見える内容を指すのに使われる）にあるコ
舐めちゃダメよ！お問い合わせフォームの作り方
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみる アクセスアップ！ それだけが、ホームページからの売上をアップさせる方法じゃありませぬ。 アクセス数を増やさなくても、お問い合わせフォームに少し工夫を加えるだけで、売上が大きく改善することもあるのです。 今回の記事では、効果的な「お問い合わせフォームの作り方」を実例付きで解説します。 無料で使えるおすすめの「メールフォーム作成ツール」も紹介するので、乞うご期待！ 事例： お問い合わせフォームの改善で売上げアップ！ 下の図が何か、わかりますでしょうか？ Googleアナリティクスというサービスで、あるサイ
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
AppleがiOS 7向けアプリのUIデザインで「すべきこと」や「してはいけないこと」などをまとめたサイトをオープン - GIGAZINE
iOS 7ではユーザーインターフェース(以下、UI)がフラットデザインになり、見た目も操作方法もこれまでのiOSとは違うものになりました。そんなiOS 7向けアプリを開発するデベロッパー向けに、AppleがUIデザインで気をつけるべき点やガイドラインなどをまとめています。 Designing Great Apps - Apple Developer https://developer.apple.com/design/ このサイトは登録済みiOSデベロッパー向けのもので、iOS 7向けアプリをデザインする上で必要な要素を、複数のページとApple World Wide Developer ConferenceやTech Talksのムービーを使って解説してくれます。 例えば、UIデザインのヒントを集めているのが以下のページ。 UI Design Dos and Don'ts - Apple
UI/UXデザインに関わるなら見ておくべき記事とスライド5選！！ |
今回はUIやUXに仕事でこれから携わりたい！と思っている人や、仕事で必要だけどイマイチ理解できてない！という人のために良質な記事＆スライドを厳選しました！今回はUIやUXに仕事でこれから携わりたい！と思っている人や、仕事で必要だけどイマイチ理解できてない！という人のために良質な記事＆スライドを厳選しました！ 【UI】「優先順位を決めて、やるべきことを絞る」/河原香奈子氏 >>記事はこちらからどうぞ！ 短めの記事なのですが、STORES.jpがどのようにUI/UXを作り上げてるかが垣間見えます。webサービスを作ってる方は必読だと思います！ とってもわかりやすくて初心者向けな記事だから俺にぴったりだってばよ！ 【UI/UX】「重要なのは、毎日さわって嬉しいUI UX!」 UI＆UX / 重要なのは、毎日さわって嬉しい UI UX! from Akiko Ohtsuka スマホアプリのUI/
スマートフォンアプリやスマホサイトのUI設計をする際に参考になる記事
【スマートフォンのユーザビリティチェックリスト】 1.小さくし過ぎない、詰め込み過ぎない 2.バラつきを無くす 3.タップしたオブジェクトは反応させる 4.画面遷移アニメーションを設定する 5.画像の解像度はきちんと合わせる 6.実装側でもデザインする 7.ローディング中も画面操作できるようにする 8.真っ白なローディング画面を避ける 9.更新頻度の低いコンテンツはローカルで保持する 【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた http://masaki0720.tumblr.com/post/19192937336 【Android設計のポイント】 Android では画面上になるべくボタンをおかないAndroid 端末ボタンを効果的に使うAndroid には Notification、ウィジェットもある
嫌いな入力フォーム
例えば「名前」の入力フォーム。 例のように「名前」全部を入れるところもあれば、姓と名を分けて入力させるところがあります。 これは当選商品を発送したり、DMを送ったりなど“送付”する場合に、姓と名の間に空白を入れたいために利用される場合が多いです。 あるいは、ログイン後のページで「○○（姓）さんようこそ」みたいに表示させるだけの目的だったりします。 でも入力する方にしてみれば、例1のように1個のテキストボックスであった方が楽なんですよね。 郵送目的がないサイト（例えばフリーメールのアドレス取るだけ、とか）でこんな名前入力のフォームを見ると、システム的に無駄なので、なんかハラたちます（いちおーシステム屋さんとして）。 これにあわせてフリガナを入力させるフォームがありますが、これは顧客管理を五十音順にしたいためだけ。 よって、フリガナに関しては性と名が分かれている必要は一切ないはずです
2012スマートフォンサイト編｜Webユーザビリティランキング｜トライベック・ブランド戦略研究所
トライベック株式会社は、スマートフォンで主要サービスを展開している企業のうち、ポータルサイト、ECサイト、企業サイト、特定ジャンルの専門サイト（不動産、金融など特定ジャンルや用途に特化したサイト）の4分類30サイトを抽出し、対象となるスマートフォンサイトに対してユーザビリティ診断を実施しました。 ※ A軸:アクセス性、B軸:サイト全体の明快性、C軸:ナビゲーションの使いやすさ、D軸:コンテンツの適切性、E軸:ヘルプ・安全性 ※ 総合スコアは、5軸に傾斜配分をかけて割り出したものであり、5軸の単純平均ではありません。（満点＝100点） 順位 サイト名 総合スコア
スマートフォンサイトに適したユーザビリティとは？【リサーチ】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
サントリーお客様センター（お問い合わせ・Q&A）
ソフト ドリンク 0120-139-320 お酒(ワイン除 く)、その他 0120-139-310 ワイン 0120-139-380 ・内容を正確にうけたまわるため、お客様に電話番号の通知をお願いしております。電話機が非通知設定の場合は、恐れ入りますが電話番号の最初に「186」をつけておかけください。 ・お客様からいただきましたお電話は、内容確認のため録音させていただいております。要配慮個人情報をお伝えいただく場合、事前に、ご本人様の同意を得ていただきますようお願いいたします。 ・電話番号はお間違えのないようおかけください。 ・携帯電話でお問合せいただいたお客様に、ショートメッセージサービス（SMS）でアンケートをお願いすることがございます。サントリーグループの製品・サービスの向上・改善に結び付けたいと考えておりますので、率直なご意見をお寄せください。なお、送信元の番号は、サントリーお客様
ウェブサイト設計の時に役立つ７つのテクニック／【その1】ファーストビュー設計のポイント (ユーザビリティ実践メモ)
サイトを作るにあたって、伝えたいことやユーザが求めているものをはっきり考えられても、いざ実際のウェブサイトにしようとするとどう作ったらいいのか途方に暮れてしまう、といったことはありませんか？ 実践メモでは、今回から7回シリーズで実際のウェブサイトをどう作っていったらよいのか分からないときに役立つ、特に重要な7つのテクニックについてまとめていきます。 ファーストビュー 関連性 具体性 ウェブライティング リンクの装飾と配置 目線の操作 他サイトでの慣習 まとめの第1回は「ファーストビュー」についてです。ファーストビューは、ユーザがそのページを見るかどうかを決める重要なエリアです。以下4つのことに気をつけてください。 ファーストビュー設計／4つのポイント 縦幅を節約する 適切なフィードバックを与える 下にページがつながる印象を与える 画像を置く 1. 縦幅を節約する スクロールしないユーザもい
ロゴマークの暗黙知について - Webサイトの上部にリンクは必要か？ - - kojika17
多くのWebサイトの上部にはロゴマークやサイト名が表示されており、 HOMEに戻るためのリンクが貼られている場合が多いと思います。 サイトの上部のHOMEに戻るリンクには、どのような効果があるのか、 また暗黙知としてのユーザーの反射的な行動について、20週間のデータから考えてみます。 デザインを変更して調査 暗黙知とは 認知の過程あるいは言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない身体の作動を指す。 暗黙知 - Wikipedia GoogleやYahoo!などの大手サイト、一般のサイトでも、左上のロゴマークにHOMEに戻るリンクが貼られている場合が多く、一般化している傾向にあると思います。 5週間ごとに当ブログのデザインを変えながら、ロゴマークについたリンクにはどのような効果があるか調査しました。 既存のデザインから、いきなりロゴマークをとってしまうと違和感
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
Androidはもっとこう改善されるべき...と思う7つのポイント
Androidはもっとこう改善されるべき...と思う7つのポイント2011.08.13 12:00 mayumine この秋、しのぎを削りあうiPhone、Android、Windows Phone、等といったスマートフォンはさらに改良され、それぞれ新バージョンが登場予定です。 iOS 5にWindows Phone 7.5はかなり魅力的に見えますが、Android 4.0（Ice Cream Sanwich)はどうなんでしょ？ Ice Cream Sandwichでは、Androidの煩わしい問題の改善にフォーカスされるらしく、その他基本的にはタブレットと携帯端末のOSの統合や、断片化の軽減、ハードウェア機器とうまく統合できるようになる...そうです。 でもAndroidってiPhoneやWindows Phoneと比較しつつ、Androidのこれを改善したらもっと良くなるのに！と思うこ
675. ドリンクバーの機械 ～押してる間だけ出るのか、短押しでいいのかわからない | 使いやすさ日記 by U'eyes Design Inc.
読者の小澤さんから、飲食店のドリンクバー等に置いてあるサーバーが、ボタンを押している間だけ注がれるタイプと一度押せば１カップ分が注がれて自動的に止まるものとあるが、見た目でその区別がつかなくて不便に感じる、というご意見をいただきました。これはおっしゃる通りだと思います。同じ不満をお持ちの方も多いのではないでしょうか？ 操作部品の外観を見ただけでそれをどう扱ったら良いかわかることを我々の世界ではアフォーダンスと言います。例えばボタンは多くの場合ベースの面から少し飛び出していたりすることで、「ボタン」と書いてなくてもなんとなくここが押せそうってわかりますね。これを応用して、本来凹凸がないWebページの上のボタン画像もうまく陰影をつけて立体的に見せるといった工夫をするとそこがクリックできるんだということを“アフォード”することができます。ただこの例のような長押しか短押しかをアフォーダンスだけで誘
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp： デザイニング・インターフェース ―パターンによる実践的インタラクションデザイン: Jenifer Tidwell, ソシオメディア株式会社, 浅野 紀予: 本
【インタビュー】クックパッドのUIデザイナー：「エンジニアの仕事が０を１にする仕事なら、デザインは1を100にする仕事 」 | Startup Dating