less is more - naoyaの寿司ブログ
機能は少なく、シンプルな方が良いというのが近頃のスタンダードな考え方だろうけど、それがなぜ良いかについて少し斜め上からの考察。ユーザーから見た場合は、迷いなく使える、そのソフトウェアが提供する機能が限定される。人間は選択肢を与えられるとストレスを感じる生き物なので、選択肢がそれしかない、という状況は快適。少し文脈外れるけど、Readability でページから余計な情報を削いだら集中して読めたりとか、iPhone/iPad のダブルタップで文章にフォーカスしたら同じような状態になるのも、「他に意識を取られるものがなくなる」という心理効果が大きいのだと思う。と、ここまではユーザー視点。一方で、個人的にはこちらも大事だと思うのがサービスの作り手視点。機能をシンプルに、また数も少なく留めておくと、ユーザーがそのサービスをどういう風に使っているかということに対して、自分達の想像とユーザーの実際の行
私が「Ice Cream Sandwich」を嫌いな理由 - Kazzz's diary
GALAXY Nexusが来て2日間使い倒した。ハードウェア自体は良いなぁと思う点が多々あったものの、ソフトウェアに関しては自分がそれを生業にしている点で評価がどうしても厳しくなってしまうようで、今の所嫌いな所ばかりが目立つ状況だ。 私は元々AndroidそれもGingerbread(2.3)までのスマートフォンを主なターゲットとした装飾を控えめにした機能優先なインタフェースとデザインは好きだ。がしかしAndroidとしてタブレットに始めて対応することとなったハニカムは機能的なデザインが影を潜め、完成度もお世辞には高いとは思えないそのデザインとGUIは結局好きになれずじまいだったのである。 そこでAndroid4.0だ。"Ice Cream Sandwich" (以降はICSと略する)はスマートフォンとタブレットのユーザインタフェースを統合するものでありそのデザインは基本的にはハニカムが踏
「行列のできる入力フォーム」、ポイントは4つのおもてなし
入力フォームに対してもっと企業は「おもてなし精神」を持つべきだ――と言いたい。せっかくカッコいいWebサイトでも入力フォームがそっけなければ客は離脱してしまう。デルのサイトを参考に、行列のできる入力フォームを考えてみよう。 わたしの会社では、いくつかWebマーケティングの改善サービスを行っている。中でも「フォームアシスト」と呼ばれる入力フォームの改善サービスは、国内でいち早くスタートしたこともあり、ライセンス数350を超える主力商品だ。 フォームアシストは今どきのSaaSというかASP型の期間レンタルサービスで、顧客の持っている資料請求ページや購入ページの離脱を改善することを目的にした商品である。当社のコンサル曰く、「平均で9.45％の離脱改善効果が出ている」というのだから、理論上は集客が増えなくても売上10％向上につながる費用対効果抜群のサービスだ（ちょっと自画自賛しすぎかも）。 ちなみ
使えるユーザビリティーガイドライン10 – creamu
遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて
顧客を逃してしまう、Eコマースサイトの15のポイント
Eコマースサイトの設計・制作時の間違いで、顧客を逃してしまう15のポイントと解決方法をSmashing Magazineから紹介します。 15 Common Mistakes in E-Commerce Design 下記は、そのポイントと解決方法を簡潔にしたものです。 原文ではキャプチャ入りで詳細に解説されています。 商品の詳細な紹介ページが無い。 商品の外観・材質・重量・寸法など詳細な情報を提供します。 連絡する手段が分かりにくい（提供されていない）。 ウェブサイトの全ページの見つけやすい場所に連絡に関する情報を掲載します。 購入のフローが長すぎる（分かりにくい）。 シンプルなレイアウトにし、入力→確認→完了のようにフローを簡潔にします。 購入時にサイトへの登録を必須にしている。 登録無しでも購入できるようにします。登録を入れる際は最後にオプションでいれます。 サイトの検索機能が役に立
Webサイトのマウス操作をトラッキングする·simple mouse tracking MOONGIFT
Webサイトの運営は孤独だ。ユーザからのフィードバックを得るというのはかなり難しい。対面式でない分、時間や地理的条件に束縛されないというメリットがある反面、訪問者が何を考え、どういう動きをしているのかといった情報が分からずユーザビリティの改善は困難だ。 ユーザのマウスの動きをトラッキングする だがデジタルだけに仕組みをうまく用いればもっとユーザの動向が分かるようになるはずだ。 今回紹介するオープンソース・ソフトウェアはsimple mouse tracking、マウスの軌跡を記録、再現するソフトウェアだ。 simple mouse trackingはJavaScriptとPHPで提供されるソフトウェアで、指定されたJavaScriptタグを埋め込むことで動作する。埋め込まれたWebサイトでマウスを動かすとその軌跡が記録され、管理画面から見ることが出来るようになる。 動きを追っているところ
Webツールに最適な、ちょこっとだけ体験させるインターフェイス : ロケスタ社長日記
シフターというツールがあり、僕も使ってたりしてたんですが、そのプロモーションサイトがリニューアルしたらしいです。 これがなかなかどうして、ぐっとくるインターフェイスだったので紹介します。これはツール系のサイトをやっている人には参考になるのでは。 シフターとは？ そのまえに「シフター」って何よ、という話です。 シフターについては以下で紹介したことがあります。 アルバイトのシフトをWeb上で管理する「シフター」が相当イケてる : ロケスタ社長日記 簡単に言うと、アルバイトのシフト管理を効率よくできる、Web上のツールですね。いまだにＥｘｃｅｌとかでやっている人が多い中、Web上で管理できる数少ないツールの一つです。 シフターとは？ で、このインターフェイスの何がいいかというと、トップページ上で、シフターのツールのさわり心地を実際に試すことができるのですね。 こんな感じ。 今
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
これは必見！Fencesでデスクトップを分かりやすく超効率化する:phpspot開発日誌
Fences- By Stardock - Clean up your desktop clutter これは必見！Fencesでデスクトップを分かりやすく超効率化する。 デスクトップにアイコンが全くない、という人は別ですが、個人的にデスクトップにアイコンが散らばっています。 これをうまくソフトでカテゴライズできないかと数年前から思っていましたが、求めていた物があったようです。 以下、見ていただければ分かるように、デスクトップのアイコンをカテゴライズできてしまいます。 早速インストールしてみました。日本語も問題なく通ります。 次のように、アイコンをカテゴリごとにグループ化できました。 単純にフェンス上にアイコンをドラッグするだけでＯＫ。 グループの一括ドラッグで移動することも出来るし、グループやアイコンの上に重ねて置くことも可能。 リサイズも右端をドラッグして簡単に行える グループを右クリ
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
サイトのUIに関するテストを手軽に作れる『Five Second Test』 | 100SHIKI
サイトを作ったら試してみたいのがFive Second Testだ。 このサイトではあなたが作ったサイトのスクリーンショットをアップするだけで、簡単なUIに関するテストを作ることができる。 テストを受ける人はアップされた画像を5秒間だけ見せられて、そのあとに何を覚えていたかを書かされる、という仕組みだ。 このテストを実施することで、あなたのデザインで何が印象に残るか、もしくは残らないかを知ることができるのだ。 自分が意図したとおりにユーザーに情報が伝わっているか、きちんと確かめるのは大事だ。こうしたテストはお手軽でいいかもしれないですな。
画像一つ使う際にもユーザーが何を感じ取るかを考えよう（powered by beBit） | SiMPLE*SiMPLE
※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 beBit社から「画像一つでもコンバージョン率がこんなに違う」という事例を紹介してもらいました。今回事例としてご紹介いただいたのはある住宅ローンサイトの画像について。 ↑ 説明してもらった同社コンサルタントの土井さん。 あなたは住宅ローンサイトで「お問合せはこちらから」というページをつくるとしたら、そこにどんな画像を使いますか？ やわらかい印象のイラスト、ヘッドセットをした女性が電話に出ている写真、などが候補にあがると思いますが、ユーザビリティテストの結果、一番効果的だったのは・・・（考えてみてください）・・・「男性社員の写真」でした。 よく「お問合せ」というと「女性のオペレータ」を連想してしまいますが、大事なのはこれは住宅ローンのページだということです。 実際にテストをしてみると「支店にいるようなロ
AJAXタブを作る際の13のユーザビリティガイドライン
先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。。。以後気をつけます。 さて、気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブメニュー」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! タブユーザビリティ、13のガイドライン Ajaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。 1. タブは同じ文脈内で一覧を作る代わりに使おう 異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過
ユーザーに尋ねても必ずしも正しい答えは返ってこない
今日はたまたま「ユーザーからのフィードバックを集めることの難しさ」が話題になったので、それに関連するエントリー。 もの作りにおいて、「ユーザーが何を必要としているか」を知ることは大切だが、だからと言ってユーザーに尋ねれば正しい答えが返ってくる訳ではないところが難しいところ。具体的な例としては、こんなものがある。 1. サイレント・マジョリティの声は聞こえてこない これはMicrosoftで実際にあったことだが、Outlookのチームではユーザーから寄せられる機能追加のリクエストに従って色々な機能を足していた時期があったが、その結果不必要な機能ばかり増えて、単純な作業が逆にやりにくくなってしまった（たとえばカスタム・フォームが良い例）。このケースでは、ごく一部のヘビー・ユーザーばかりが声がでかく、「今の機能で十分、これ以上複雑にしないで欲しい」というユーザーは何も言ってこない（こういう人たち
MOONGIFT: » 半透明でクールなヘルプ「CoolTips」:オープンソースを毎日紹介
最近新しいサービスを作っているのだが、ようやく最終段階に入り細かいユーザビリティを気にできるようになった。その中で、入力フォームや分かりづらい項目に説明をつけようと思った。 ただのリンクでは寂しすぎる。あまり使われる事がない機能かも知れないがクールに攻めよう。 今回紹介するオープンソース・ソフトウェアはCoolTips、半透明でクールなツールチップだ。 CoolTipsは指定した場所にマウスを持っていくと浮かび上がるツールチップで、半透明の角丸になっている点がクールだ。しかも半透明で、背後の項目が透けてみえる点も良い。 他のライブラリとして、prototype.jsやscript.aculo.usを利用している。ツールチップを表示する項目側は特に設定はなく、title要素に説明文を入れておけば良いだけだ。後はJavaScript側で項目を指定すれば簡単に実現できる。 背景色、枠線色、文字色
第7回 コンテンツの魅力を引き出すユーザーフレンドリーなウェブライティングのコツ | Web担当者Forum
第7回 コンテンツの魅力を引き出す ユーザーフレンドリーなウェブライティングのコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題がおきないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） コンテンツの価値を確実に伝える ウェブライティングの基本6大原則とは「Content is King」という言い回しを見聞きしたことはあるだろうか？ これは“音やグラフィックなどの表現法より、提供する情報の中味がまず第一である”という格言であり、ビル・ゲイツも引用しているほどだ。最近は、SEOやLPOを筆頭とするさまざまな「ノ
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
Site Under Maintenance
Site Under Maintenance
