以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で

スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？ 上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに グーテンベルクの原則 上部と下部のボタン 水平に並んだボタン 垂直に並んだボタン 水平と垂直のハイブリッド スティッキーボタン まとめ はじめに ボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？ タスクを素早く完了することで、より満足のいくエ

＜質問＞ スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか？ ＜回答＞ 文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはＷＥＢを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う１０個のことを紹介します。 ① リンク箇所が一目で判らないと嫌われる スマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大

ウェブサイトに用いる写真の選び方・使い方によってサイトを閲覧する人の潜在的な意識に働きかけて、サイト自体の印象をコントロールし、究極的にはより良好なコンバージョンを得るためのコツを、マーケットリサーチやSEOに携わるニック・コレンダ氏がブログで明らかにしています。 Which Stock Photos Convert Higher? http://www.nickkolenda.com/which-stock-photos-convert-higher/ 人間は写真を見たときに脳のさまざまな回路が刺激を受けて、無意識のうちにさまざまなイメージを連想するものだとのこと。そのため、この無意識の「連想ゲーム」を逆手に取ることで、読者にサイトポリシーを明確に伝えたり、より良いコンバージョン率を達成したりできるとコレンダ氏は考えています。 コレンダ氏はさまざまな学術論文を参考に、人は写真や画像から以

おはようございます。ユーザーの動きをすべて動画で再現できる、まったく新しいサイト分析ツールのご紹介をさせていただきたいと思います。 機能のご紹介の前に、なぜ世の中には、こんなに使いづらいサイトが多いのでしょうか？ これはレンタカーのサイトですが、レンタカーを借りる場合、店を選んだら空在庫が全部見たいと思いますよね？ ですが、日本のサイトはセダンなどの車種をひとつひとつ選ばないと、見ることができません。なので全在庫を確認するのに20クリックくらいかかったりします。 これは転職情報の例ですが、ユーザーの心理として、どんな転職情報が見たいか？ 登録しないと情報を見ることができない、というのが現状です。 これは「ハワイアンウォーター」というウォーターサーバーのECサイトの例ですが、 購入ページまで行って初めて、ガロンという新しい単位が出てきたりする。 こういう時のユーザーの心理は、ガロンってなんだ

自己紹介 会員事業部*1 森田です。昨年はプレミアムサービス(以下PS)*2の訴求改善を担当しました。その中で抜きん出て効果の高かった施策を紹介します。具体的な数値を書くことは出来ないものの、この施策一つで前期に私がおこなった他の施策効果の合計を上回ります。 施策内容 紹介する施策は検索結果に関係するものです。今までは検索結果の下に控えめに表示していた人気順検索*3以外のPSコンテンツの訴求を、検索結果の間に追加しました。 殿堂入りレシピ*4 (人気順検索以外のPSコンテンツ)の訴求 予期せぬ効果 実はこの施策は会員事業部によるものではなく、別部署による検索ページへの大きなデザイン変更施策*5の一部として行われました。そのため検索結果の間でPSコンテンツを紹介することも私が考えたわけではなく、効果も深く考えていませんでした。当時私が気にしていた事は、今までも存在していた人気順検索の訴求効果

ビスケットは，開発して新しい機能を追加したときなど，必ず子どもたちが使っている様子を自分目で見てどんな風に使っているかを見てきます（最近はその暇が無くて他人に任せていたりして，かなりまずいんですが）．3年前くらいの面白いエピソードをご紹介しましょう． ちょうど，Androidタブレットで動くビスケットを開発していて（これはまた一般には配布していません．実験環境だけです），それがどのように子どもたちに使われるか見に行きました．僕としても指で直接操作するタブレットのUIの開発は初めてで．実は，マウスとタッチペンの操作は結構似ています．どちらも，非常に小さいエリアを結構正確にポイントできて，ドラッグもできますから．どちらかというと，ペンの方がドラッグが得意でしたね．小さい子はマウスクリックが全然出来ないとか（ボタンを押すときに指先だけ押すということができないので，手を握ってしまって，その結果マウ

「ユーザビリティを意識することが大切！」って言われても、何となく意味は分かるけど具体的にどうすれば良いの……と悩んでいる方も多いのではないでしょうか？ ユーザビリティとは、「単なる使いやすさ」のことではありません。特にWebにおいては売上や成果などビジネスを左右する重要な概念です。しかし、多くの人がユーザビリティについて間違った認識を持っているために、みすみす売上や成果を逃しているケースをよく目にします。 ユーザビリティを正しく理解するポイントは、特定のユーザの行動、心理、目的に焦点を当てることです。 本日は、よくある「間違い・落とし穴」を例に出しながら、売上改善に直結する「正しい」ユーザビリティの考え方をご紹介します。ぜひ皆さんもユーザビリティの理解を深め、Webサイトの改良に役立ててください！ 【事例】１つのボタンを変えただけで、年間300億の売上増！売上に直結するユーザビリティとは、

フェイスブックが使いにくいみたいな意見はよく見かける ネット初心者・上級者・古参、関係なく見かける このひと、ネットのリテラシー高くて、ほかのツールはすぐさくさく使えてるのに、フェイスブックにはすごいダメ出してる、みたいな人いる でも、個人的な感覚として、そんな使いにくいインターフェースではない 慣れなのかなともおもったけど、いつまでも慣れないってひともよく見かける ということは、慣れとかリテラシーとかじゃない何かがある むしろ、既存のネットに慣れてたりリテラシーがあったりすると、それが邪魔をするような何かがある 例えば、ニュースフィードが投稿を間引いたり、並び替えたりするのを、すごい怒ってるひとをよく見かける 時系列で全部を並べろ、という でも、時系列で全部を並べられても読めないんだから、それなりのアルゴリズム（エッジランクという名前ついてて、自分に親しい友達がいいね！したエッジはランク

最近変なスクロールを使ってるサイトを見る。 これとか http://www.apple.com/iphone-5s/ これとか http://heteml.jp/ 他にも色々。 Javascriptがなんか頑張ってんだろうけどさ、 正直鬱陶しいよ。 やけに重いし、使いづらいし。 Chromeだとヌルヌル動くって？ みんなChrome使ってる思ってたらアカンでほんま。 追記： この変なスクロールはパララックスと言うそうです。 「この変なスクロール＝パララックス」ではないそうです。 また、「この変なスクロール＝パララックスのひとつ」と言う訳でもないみたいです。 ごめんね、もうこの追記消したい気分。

高齢者へのiPad導入を阻んだiOSのUI/UXの話 先月（2013年11月）、徳島県南部局と美波町が共催する「ITふるさと村」の講座で、iPadを使ったタブレット講座を開催しました。その成功と失敗の体験について書こうと思います。 Facetimeビデオ通話のデモで会場を一気に盛り上げたものの、参加者に実際に体験してもらう段階で「大失敗」。AppleIDの取得とそのためのiCloudメールの登録をしてもらってから、と進めたのですが、30名ほどの参加者のうち時間内にゴール出来たのは、たったの１名。好きなアプリをダウンロードしてもらい、タブレットの楽しさを感じてもらう目標が、そのスタート地点にも立てず(;_;) 企画や運営、インストラクターとしては完全に落第点でした。それを棚に上げると、高齢者とITに関する課題が大量に見えたという点では、ある意味「大成功」だったとも言えるでしょう。 【講座内容

とりあえずのってみよう、このビックウェーブに 少し時間が出来たので、毒舌帳から分離して膨らましてみる くそ長文、くそ乱文、くそ構成なのはご容赦ください 物語の流れ ■私って古参アピール 本筋とは全く関係の無い話、「ニコニコ動画はいつもこう」に対する前置き ↓ ■デザインについてプロは言う iPhoneのデザインの変遷と比較しつつ、デザインの難しさを偉そうに書く ↓ ■ニコニコ動画はいつもこう ･･･ニコニコ運営って･･･ほんと馬鹿、と言いたいだけの話 ↓ ■ニコニコのデザインはどうしてダメなのか ニコニコ動画を例に挙げて、魚拓をとりつつ 何が変わったのか、何がいけてないのか、何がいけてないのかをまとめる お話の本筋 ↓ ■ニコニコを裏で動かしていることに自覚がない人達 エセ古参をでぃすりつつ、Zeroは裏でエセ古参たちが暗躍していた話 ↓ ■おわり 結局、ここであーだこーだ言っても何も変わ

お久しぶりです。マラガの海の贈り物ディレクターのSEKOです。 みなさんは普段スマホで「いつ」「どこで」調べ物をしますか？ 私は会社の行き帰りの電車の中で調べ物をしている事が多いですが、「限られた時間の中で知りたい情報をすぐに見つけたい」なのにサイトが重かったり、知りたい情報が見つけにくい、操作がしにくい。そんな経験はないでしょうか？ 本日はストレスのないスマホサイトを作るにあたりUIをどのように考慮していけば良いか８つのポイントをお届けします。 スマートフォンを利用するシーンを想像しよう。 まず一番重要なことがスマホサイトを利用するシーンを考える事です。大抵スマホサイトを利用する場合は下記の状態が考えられます。 時間に余裕がない 通信環境が不安定な状況にいる 利用が断続的である。 屋外、通勤時間の電車の中、休憩時間のカフェ、会話中に思い出せない事がある時など「すき間の時間」の利用シーンが

by Thomas Guignard インターネットを利用していると、自分の意図しない予想外の操作がなされてしまい戸惑うことがたまにありますが、それはそもそも人をだますことを目的としたデザインかもしれません。そんな人をだますことを目的とするユーザーインターフェースは「ダークパターン」と命名され、その手法がまとめられています。 Dark Patterns - User Interfaces Designed to Trick People http://darkpatterns.org/ ダークパターンとは人をだます目的で作られたユーザーインターフェースであり、決してミスデザインではありません。それらは人間の心理をよく理解して注意深く作られていますが、ユーザーの利益はまったく考えられていません。 ロンドンのデザイナーであるHarry Brignullさんは、ダークパターンについてまとめたサイ

有限会社いろはの代表取締役兼経営コンサルタント・竹内謙礼が、「ネットで売れるもの売れないもの　増補改訂版」（日本経済新聞出版社）を8月2日に発売するにあたり、楽天リサーチを活用して、スマートフォンユーザー100名に対して、アンケート調査を行った。 同調査では、スマートフォンで一般的に表示される「PCサイト」と、スマートフォンの画面の大きさに合わせて表示される「スマートフォン専用サイト」と、どちらが活用されているのかを中心に尋ねた。 まず、「スマートフォン専用サイト」と「PCサイト」、どちらが使いやすいか質問したところ、「スマートフォン専用サイト」と回答した人が39％だったのに対して、「PCサイト」と回答した人が45％と、6ポイント上回る結果となった。「特に意識はしていない」と回答した“どっちでもいい派”の人が16％いることから、6割以上の人がスマートフォン専用サイトに対して利便性を感じてい

ほらね、あんだけ騒いでたくせに、慣れるんだよ。 一定水準以上のクオリティを求める行為はもはや個人の好みの範疇だと思う。 そして、結果が出るのには時間がかかる。 だから、俺 (webプログラマ) から見て、Web ディレクターが、細かいABテストを1週間実施して反応がどうの言ってるのは 納得できないんですよ。短けぇって。 - 追記 (2013/06/07 01:10) - 不満ばっかり言いやがって。これがはてなユーザーか。 こんなんだから、Windows XP からの移行も進まねぇんだよ。 老害を叩いてイノベーションを支持していくのがはてな民の矜恃かと思ってたが、 とんだ期待外れだ。 お前らずっとTOEIC高得点取る方法とかブクマし続けてくすぶりつづけろ。

こんにちは！ みなさんQuoraというサイトをご存知ですか？QuoraはFacebookの元CTO（最高技術責任者）が立ち上げたQ&Aサイトです。実名+肩書きの登録が必要なので、他のQ&Aサイトより回答者のクオリティが高い事が特徴のようです。（日本だとYahoo知恵袋が似ているWebサービス） 今回Quoraで日本のWebデザインについての興味深い質問を見つけたので、その質問と回答のいくつかを記事にしてみました。（記事ネタQuestion :Why is web design so bad for Japanese websites?） 【Question】 これまで日本のWebサイトは一般的にきれいなものだと思っていたが、実際は違った。アメリカのWebサイトより5年から10年の遅れを取っているように思えます。多くのWebサイトにFlashが使われているし、アメリカのものよりごちゃごちゃし

はてなは2月6日、「はてなブックマーク」トップページのデザインを変更した。1月に行ったリニューアルに対するユーザーの声を踏まえ、記事一覧からユーザーのコメントを消すなどして「情報密度を高め、コンテンツを見渡しやすくした」としている。 トップページの「人気エントリー」では、記事ごとに表示していたブックマークコメントを省いた上で、高さを圧縮したタイルデザインを採用し、コンテンツを見渡しやすくした。右カラムにあった新着エントリーや、はてなブログの人気エントリーといったメニューは下に移動させ、メインカラムの情報に集中しやすくした。 リニューアル時に変更したカテゴリ名についても説明。従来と同じカテゴリ数・分類アルゴリズムを維持しているが、「長年の運用を経て、当初のカテゴリ名とコンテンツがやや乖離していたため」カテゴリ名のみ変更したという。新旧カテゴリ名の対照表は以下の通り。 新カテゴリ名 旧カテゴリ