キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
カスタマーサポートの写真を「女性」「男性」「ブロンド美女」「猫のキャラクター」に変更すると、何が起こるのかという記録
ウェブサイトやアプリの開発を行っている場合、ユーザーと直接連絡が取れると製品のフィードバックに役立ちますが、同時に心無い中傷に担当者がストレスを受けてしまう可能性もあります。ウェブサービスの運営者がカスタマーサポートの写真と名前を「女性」「男性」「ブロンド美女」「猫のキャラクター」にすることで、届くメッセージにどのような変化が見られるかを実験しており、写真1つでストレスを格段に減らせる可能性が示されています。 Why I don't use my real photo when messaging with customers on my website · Kapwing Blog https://www.kapwing.com/blog/why-i-dont-use-my-real-photo/ オンライン・ムービー編集ツール「Kapwing」の開発者で創業者の1人である24歳の女性・
「顧客は取説を読まない」…液体漂白剤の会社に日常的に寄せられるクレームが衝撃的
メモちゃん @kobaka7_memo 顧客は取説を読まない。製品の使い方にも思い込みを持ちやすいし、誤ってしまう。ある液体漂白剤の会社には「味を改善してはどうか」という要望が日常的に寄せられている。漂白剤を歯のホワイトニングと間違えているらしい。まじか。 #顧客体験の教科書 2017-09-07 11:44:10 メモちゃん @kobaka7_memo これまでに実施した数多くの顧客調査で、取扱説明書に目を通すと答えた割合は、常に2%以下だったらしい。こういった顧客の行動特性を考えれば、操作を間違えないようなシンプルなデザインの製品を作らなければならない。 #顧客体験の教科書 2017-09-07 13:33:22
カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと
HOME Contentsquare カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと 皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かという議論がカルーセルが普及していくにつれて盛り上がってきました。ということで、今回はこの「カルーセル」の是非について、Clicktale社のアナリストが調査した結果を報告したいと思います。 (※2020/8/21更新) カルーセルパネルとは？ そもそもカルーセルパネルって何？ ここ数年多くのサイトに導入されているカルーセルパネル
サイトのデザインを変更しただけで約50％もユーザーを失った失敗例
By Wicker Paradise アイコンに関するニュースから販売まで手がけるサービス「Icons8」の中の人が、ウェブサイトのデザインを大幅に変更したところ47％ものユーザーを失ったことをブログで明らかにしました。ブログではユーザーを失うまでの経緯や、なぜ失ってしまったのかの分析結果まで書かれていて、興味深い内容になっています。 How We Lost 47% of Our Users After a Redesign | Icons8 https://icons8.com/articles/how-we-lost-47-of-our-users-after-a-redesign/ サービス開始当初、Icons8はアイコンの開発・販売を手がけるサービスでしたが、毎日新しいアイコンを作り続けるのには無理があるため、「リクエストアイコン」という機能を実装しました。リクエストアイコンとは、
スムーズに見えるフレームレートを決めるのは眼球の振動速度？ | スラド
人間が24fps以上のフレームレートを見ることができると言い切っても差し支えないと思われるが、なぜ48fpsの動画はビデオっぽく見えるのか、24fpsの動画は「夢のよう」であったり「映画のよう」であったりするのか、60fpsのゲームは30fpsのゲームよりもリアルに感じるのか、といった点が次の疑問となる。MicrosoftのXbox Advanced Technology GroupのSimon Cooke氏が、これらをすべて説明する興味深い理論を展開している。人間の眼球は70～103Hz(平均的には83.68Hz)で微小に振動している。これは固視微動の1つでトレモア(微震)などと呼ばれるが、眼球の微震により網膜が揺れることでセンサーのおよそ2倍の解像度が得ているという仮説がある。Cooke氏によると、振動の半分よりも低いレートで変化する映像を人に見せた場合、スーパーサンプリングの実行に充
JPEGをプログレッシブにするかどうかの分かれ目は10KB
YSlow開発者であり高速Webサイト構築テクニック紹介者であるStoyan Stefanov氏による画像最適化解説シリーズの第4弾がImage Optimization, Part 4: Progressive JPEG…Hot or Not?として公開された。4回目となる今回は、JPEGにはベースラインを使うべきかプログレッシブを使うべきかをファイルサイズの観点から調査し提案する内容だ。 どのように画像を収集し、どういった処理をおこなって統計を取ったかはImage Optimization, Part 4: Progressive JPEG…Hot or Not?に詳しく説明されているため読んでみてほしい。Stoyan Stefanov氏の結論をまとめると次のようになる。 JPEG画像のサイズが10KB未満である場合、ベースライン(通常のJPEG画像)として保存して使った方がいい。約7
Android：非同期にダウンロードした画像の表示方法 | 自転車で通勤しましょ♪ブログ
※この記事はAndroid Advent Calendarの19日のエントリーです。 さて、勢いでAndroid Advent Calendarに参加することにしたら、皆がガチの技術情報ばかりなので、私も技術情報にしようと思いました（ネタが滑りそうで怖くなったため）。 今回の記事は真新しい情報でもなく、非同期にDLした画像の表示方法です。 なぜこれを書くつもりになったかと言いますと、かなり前の記事ですが、Android：Adapter.getViewでAsyncTaskは危険というのを書いてまして、タブレットでAdapter.getViewメソッドで画像をAsyncTaskを使ってダウンロードさせるとAsyncTaskの呼び過ぎでアプリが落ちてました。それの自己解決方法の記事を書いてなかったので、折角だから書いておこうかなと思った次第です。ただし、あくまでも私流です。これが正解ということは
【完全に立体】飛び出すGIFアニメが本当にスゴイ！ | ロケットニュース24
GIFアニメ （ジフアニメ）とは、ネットの世界でよく使われている「動く画像」だ。ペカペカと2枚程度のコマが交互に表示される簡易的な作品から、まるでムービーのように絵が動きまくる大作まで……様々なGIFアニメが存在する。 そんななか、ちかごろ海外の画像サイトで頻繁に紹介されているGIFアニメ作品がある。どのようなものかというと、完全に立体を感じるのである。確かに画面上には奥行きがあり、絵が飛び出しているといっても過言ではない。 キャラデザインも可愛らしく、色使いも特徴的。こんなオシャレで技アリな作品の作者は、米シアトル在住のイラストレーター、デイン・ファーゲルホルム（dain fagerholm）氏。構図角度の違うイラストを一枚のGIFアニメにまとめることにより、見事な立体画像になっているのである。 なお、GIFアニメの作品によっては、容量やサイズ、スペック的にPCやスマホで正しく表示されな
棒グラフ（垂直） - JavaScript ライブラリー - HTML5.JP
JavaScriptから棒グラフ（垂直）をcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの棒グラフ（垂直）を柔軟に描画できます。 ダウンロード Release Date Size (byte) Download 使い方 graph_vbar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。 <div><canvas width="400" height="300" id="sample"></canvas></div> 上記タグは次の点に注意してください。 canvas要素は、必ずdiv要素で囲んでください。 canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。 canvas要素には、必ずid属性
HTML5対応のユーザーインターフェイスライブラリ「Kendo UI」登場
JavaScriptでビジネスアプリケーションを開発する際に使えるユーザーインターフェイスライブラリ「Kendo UI」の正式版が公開されました。 JavaScript用のユーザーインターフェイスライブラリといえば、jQuery UIやSencha Touchなどがあります。Kendo UIもそれらと基本的に似たライブラリですが、jQueryをベースにしつつメニューやデータピッカーなどの基本的な部品だけではなく、表形式でデータを表示するグリッドやグラフなど、このライブラリだけでビジネスアプリケーションに必要な部品をカバーしている点にあるでしょう。 HTML5対応ですが、HTML5非対応のWebブラウザもサポート。GPLv3ライセンスのオープンソースと、商用利用向けの有償ライセンス（399ドル）のデュアルライセンスで提供されています。 いくつかサンプルを挙げておきます。
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開 | URIN HACK
使用方法１―全ての要素の高さを揃える 指定した複数の要素の高さを、その中の最大の高さに揃えます。 各要素の幅が同じであれば、各要素のサイズ（高さ・幅）は全て同じになり、タイル状に要素が並びます。 各要素に対してheightを指定する必要はありません。 javascriptサンプル tile-sample1というclass属性を持つ要素の高さを、その中の最大の高さで揃えるには、以下のように記述します。 1 $(function(){ 2 $(".tile-sample1").tile(); 3 }); 実行結果 使用方法２―同じ行にある要素の高さを揃える タイルの列数を指定して、同じ行に並ぶ要素の中で最大の高さに揃えます。 javascriptサンプル tile-sample2というclass属性を持つ要素が横に４つ並んでいるとき、横に並んだ要素の高さを各行毎に揃えるには、その列数（＝４）を
Closure Library を使うべき 10 の理由 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先週 Closure Library で構築したドローウィジェット Closure Draw を公開しましたが、はてぶ数などを見る限りさほど多くの反響はなかったようです。まあ、機能が中途半端だったり作りが甘かったりというところが大きいのは間違いありませんが、 Closure Library 自体がまだメジャーではないのもあるのかな、とも思います。実際、ぐぐってもフ
$1 Unistroke Recognizer
This should automatically forward you to http://depts.washington.edu/madlab/proj/dollar/index.html
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページネーションのベストプラクティス | POSTD
【森山和道の「ヒトと機械の境界面」】 エンドユーザーによる表現・デザイン・ものづくりを支援する ～「五十嵐デザインインタフェースプロジェクト」レポート
JS Charts - JavaScript charts examples