You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
Medium
You can find (just about) anything on Medium — apparently even a page that doesn’t exist. Maybe these stories will take you somewhere new?
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 - Feel Like A Fallinstar
Home > UI（インターフェース） > ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 Older ウェブの位置づけが上がるにつれ、数値的な検証がどんどん進んでいます。 ただ、その割りにどんな方法で数字が上がった、という具体的な事例がまだまだ世の中に出回っていないのも事実。 そんな中、A/Bテストの特化してインターフェースの検証事例を公開しているサイトがABtests.com」です。 インターフェースの比較検証結果が数値でわかる http://www.abtests.com/ ABtests.comの中身は、はまさに読んでそのまんまの内容。 トップページから事例が豊富に掲載されています。 例えば・・・ このフォーム、左と右でどちらが通過率が良いと思いますか？ 答えはこちらのページにて。 なかなかここまで数字で結果を出してくれ
コンバージョン率を 25〜40% も押し上げるフォームデザイン - I am bad at math
アクセス数はアップしたがコンバージョンは全然あがらない、そんな状況を打破できるかもしれない一つの方法が掲載されている記事を見つけました。 "Mad Libs" Style Form Increases Conversion 25-40% この記事によると Mad Libs スタイルというフォームのデザインに変更することでコンバージョン率が 25〜40% も上昇したことが観測されたそうです。 Mad Libs と聞いて頭に浮かぶのはやっぱりこの人 http://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%83%E3%83%89%E3%83%AA%E3%83%96 だったんですが、アーティストではなくてゲームのことのようですね http://en.wikipedia.org/wiki/Mad_Libs 要するに穴あき文章を埋めて、その意外性を楽しむ？みたいな。
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ | warikiru
2009-11-24 High Performance Web Design ~デザインから考えるハイパフォーマンスWebサイト~ ラベル: performance CSS Nite in ISHIKAWAで話をしてから1ヶ月経ったので、薄れゆく記憶の復習も兼ねて思いの丈を綴ってみたｗ High Performance Web Design 1. What's High Performance?ここでいうパフォーマンスというのはWebサイトの表示高速化についてです。つまり、ページをいかに早く表示させるかという課題です。でも、そうゆうのってサーバー側の問題でしょ？システムエンジニアの管轄じゃないの？と思われがちですが「ハイパフォーマンスWebサイト」の著者であるSteve Soudersの調査によると、80:20。一般的にユーザーの待ち時間の実に80%がブラウザ側、フロントエンドで費やされて
【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)
これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things To Include for a User Friendly Footer ( UXBooth ) Modern Sitemap and Footer ( WebDesignerWall ) Footers (76 examples) ( Smiley Cat Elements of Design ) 例えばTIGERS （http://www.tigers.org.au）のフッター(下図)では、革
コラム一覧：日経ビジネスオンライン
2024年5月20日号 誌面ビューアーで読む 大企業による非上場化が、ブームの様相を呈している。株主市場からの圧力を避けようと模索する経営者もいるだろう。ただし、株式の買い取りには巨額の資金が必要で、一歩間…
“iPhoneとAndroidの時代”のWEBデザイン- 明日のモバイルほろ酔い語り | 居酒屋明日のモバイルほろ酔い語り
「ご無沙汰してますが最近いかがですか」 N氏「以前に比べると少しヒマになりましたね」 「やっぱり不景気だから？」」 N氏「いや、仕事は前より増えてるんですよ。広告収入じゃなくて有料サイトが多いので」 「やっぱり有料サイトはまだ不況の影響は受けてないですか」 N氏「どちらかというと、端末の値段が上がって機種変する人が減ってることが問題かな」 「ああ、機種変するとコンテンツ買いますからね」 N氏「そういうのは減ってるから、新規サイトも前ほど激しくはなくなりましたね」 「最近の端末は新機能が結構地味なんだよね」 N氏「そう、それで端末の値段のせいか知らないけど、最近iPhone売れているらしいじゃないですか？」 「いまどき0円キャンペーンとかやってるしね」 N氏「IT業界にいると、いまiPhone持ってない方が少数派でしょ？」 「Googleの社員も平気でiPhone持ち歩いてたの見ましたよ」
WEBプロデュースに役立つ10の無料ツール | I AM BLOGGING NOW.
かなり釣りエントリーっぽいタイトルですが、企画を作る際に使っているツールについて聞かれたのでまとめてみました。知っている人にとっては当り前の内容ですが、使い方によってはコストをかけずにコンシューマーのニーズと競合のスキを知ることができ、プレゼンテーションに役立つ有益なツール・サービスのリストです。 ・Google キーワードツール キーワードに対するGoogleでのおおよその月間検索数を知る事ができます。関連ワードも表示され、複数ワードが入力できるので有効なキーワードの絞り込みなどに使えます。言語や地域も設定できるので、海外の検索動向も知ることができます。また、特定のURLからページ内に含まれるキーワードを抽出する事も可能です。 https://adwords.google.co.jp/select/KeywordToolExternal ・Ferret-Plus 同様のツールですが
優れたユーザインタフェースを設計する際に考慮する8つのポイント
ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
メディア・パブ: NYTのサイト、ニュースページのシンプルレイアウト版を試す
NYTimes.com（NYTのサイト）が“Article Skimmer”と称するシンプルレイアウト版を試している。 カテゴリー別にニュースタイトル・ページを用意し、カテゴリー内の全見出しが1画面（パソコンの1スクリーン）内に収まる一覧可能なレイアウトとした。そのプロトタイプはこちらで閲覧できる。カテゴリーは、HomepageからTravelまでの17種が用意されている。下のカテゴリーページはBusiness分野である。 左サイドで特定カテゴリーをクリック指定すると、そのカテゴリーのページがすぐ現れる。スクロールしなくても次々と各カテゴリーページを閲覧できる。どうてことないシンプルなレイアウトとインタフェースである。 一方で最近のニュースサイトはソーシャルメディア化が進み、意味不明の機能ボタンや、さらにRSSとかWidgetなどの技術用語が並んでいる。NYTimes.comではさらにMy
Google ウェブマスター向けガイドライン
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
Yahoo!ファイナンスがデザインリニューアルでやっちまった | パシのSEOブログ
Yahoo!ファイナンスの一部ページデザインがリニューアルされましたが、昨年末からの流れを汲み完全に広告＆自社有料サービスへの誘導重視となっているようです。 各指標がグラフと一体化した状態で見られるのがヤフーファイナンスの良い所だったのに、なんとも見づらくなってしまいました。とりあえずそこに用語とかいらないから。 Yahoo!ファイナンスVIP倶楽部に入会させるために良い位置に板気配なんかを表示していますが、月々2000円も払ってヤフーファイナンスで板情報を確認する個人投資家なんて0.1%もいないのではないでしょうか？ 戻すという決断力 旧デザインとの比較やリニューアル後の利用者の反応はYahoo!ファイナンスの歩き方で確認できます。 リニューアル後のコメントにはポジティブな意見はほとんど無く、要するにこういう事です。 元に戻してください ただそれだけです チャート表示期間の追加だけして、
複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT
なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応
「サイトの横幅」再論：950px時代のウェブデザイン［絵文録ことのは］2009/01/14
以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論［絵文録ことのは］2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
都道府県市区町村｜データと雑学で遊ぼう！
http://www.designwalker.com/2009/04/wireframe-2.html
