あとちょっと良いサイト ATOCHOTTO
オブジェクトベースのUIデザイン術。 基本 1.デザインリサーチでゴールやタスクを把握 2.オブジェクトとアクションに分けモデリング 3.デザインパターンを使いながらメイキング 補足 すべては立証ではなくひらめきのために行う。 ネーミングと概念の定義が重要。 リサーチやモデリングの結果を詰め込むのではなく、同時進行でアイデアを考え、着地にいたらないものは外していく。 詳細はOOUX – オブジェクトベースのUIモデリング モデルの背景 デザイン組織の支援の相談には自社の組織にデザイナーないしデザインに親和性が高い人材がいないということがある。 実際には人数の多い組織であれば、全くいないということもなく、ワークショップなどをすると親和性の高そうな人材がいることもある。しかし製品レベルで影響を与えているということはないのである。 流出モデル そこで、デザイナーないしデザインと親和性の高い人材の
2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書 - Feel Like A Fallinstar
ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ
ECサイトの「カートに追加」周辺のUIを、センス良く改善する方法 - Feel Like A Fallinstar
たまには具体的なUIの紹介など。 どうしても商品画像以外のデザインがワンパターン化しやすいECサイトの商品ページに、ちょっとした一工夫をすることで画面を一味違う味付けに仕上げる小技をいくつか。 ※カートのデザイン例は、80 Examples of Add to Cart Buttons for Design Inspirationより。 1.値引きの見せ方を工夫して、割安感を「さりげなく」アピール なんだかんだ言っても、ユーザは最後は価格をしっかりチェックしてます。 あまり大々的に書くとサイトが胡散臭くなってしまうような商材で、でもちゃんと値引きや割安であることをアピールしたいケースは意外と多いもの。 そんなときは 値下げ前と値下げ後の価格を並列に設置 値下げした価格を強調（主に赤系の色を使ったり、太文字にしたり）しつつ、定価は主張しないように、でも目に留まる程度に配置 定価を横線で打ち消
フォームの完遂率は、フォーム前の設計で3倍以上変化する、というお話 - Feel Like A Fallinstar
ユーザビリティ系の記事でも何かと人気なのがフォーム周りのお話。 たぶん最終成果に一番近いところにあるから、何だと思います。 でも、一番近いから一番影響が大きい・・・という（ほぼ全国共通の）認識は実はそうでもなかったり。 「フォーム前の設計」でフォームの完遂率なんていくらでも変化する、というお話を少ししたいと思います。 実際にプロジェクトで起こった話を、1つ 最近の安直なランディングページ（※この言葉は嫌いですが便宜上こう書いておきます）なんちゃらの流行（？）のせいで、こんな画面が増えています。 とりあえずサービスの売りがドカンドカン でっかいボタンが画面に何度も何度も現れる ページが長くて字がでっかい 代理店さんがこの1ページを色々ごにょごにょ変えたりしていました。 で、その画面を、しっかりと情報を掲載して来訪者がじっくり納得できるようなページ（群）にしたところ起こったのが下の図のような結
実用的なユーザビリティの10のポイント：ガイドライン編 | コリス
ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント（ガイドライン編）をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか？ 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.
フォームのユーザビリティを再考してコンバージョンを向上
twitter facebook hatena google pocket お問い合わせフォーム、エントリーフォームなどは、ユーザーが能動・積極的に行動する数少ない場です。 このような潜在一隅の機会を逃していませんか？ フォームについて以下のようなデータがあります。 「申し込みフォームに入力し始めた人の54％が入力を途中でやめている」 （引用：申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】） ターゲット層のITリテラシーなども考慮して、サイトのフォームについて考える必要があるのではないでしょうか。 今回はそんな感じでフォームについて考えてみたいと思います。 sponsors フォームの長さ フォームが長いのを見るだけで、ページから離脱する人もいます。 項目を減らしたり、必須項目をなくすなど配慮が求められます。 極端な話で言えば、E-mailアドレスのみ入力
C-teamで作るバナー広告の効果がスゴすぎてひいた話 : けんすう日記
今、C-teamというサイトの開発に関わっているのですが、あまりに効果が高くてスゴイので、結構ショックだったので紹介します。 C-team 今までWebディレクターとして、バナー制作をしたり、自分のサイトのバナーを制作会社に頼んでいたりしたんですが、これがいかに非効率だったかということを思い知って反省したので、紹介してみます。 自分の関わっているサービスをスゴイスゴイ言うと宣伝くさくなるので避けてたんですが、これは本当にびっくりしたのです。通常のバナーの作り方 通常のバナー広告って以下みたいな手順をふむことが多いですね。 1. 宣伝したいサイトの運営者(ディレクター)が欲しいイメージを制作会社に伝える 2. 制作会社のデザイナーさんがいくつか作る 3. そのバナーでよさそうなものを運営者が選んでそのバナーを出す ここでの問題は、1も2も3も「こういうのがいいんじゃないか」って勝手に想像して
U-site
長文コンテンツのための5つの書式テクニック ニールセン博士のAlertbox 3月19日 要約、箇条書き、コールアウト、太字、役立つ視覚情報などのテクニックを用いることで、1,000語を超えるコンテンツの理解度やエンゲージメントは向上する。 このサイトについて UXリサーチや市場調査の手法やコツ、結果や知見を紹介しています。 詳細 新記事公開は、Twitter・Facebook・RSSで随時、メルマガで月1回通知します。 Twitter Facebook RSS メルマガ UXのためのAI：入門編 ニールセン博士のAlertbox 3月13日 生成AIツールを、あなたのUXスキルを代替するためではなく、サポートし、強化するために使おう。小さなUXタスクから始めて、ハルシネーションや誤ったアドバイスに気をつけよう。
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
ケータイ文化圏とネット文化圏の深い溝 [絵文録ことのは]2006/10/25
主にPCを使ってウェブサイトを閲覧している人と、主にケータイを使っていてPCは全く（またはほとんど）使わない人では、たとえ同じページを見ていても、まったく行動や思考形態が違う。「ケータイ族」という言葉もあるが、ネットでの常識はケータイの人たちに通じず、ケータイの常識をネットばかりの人は理解していない。 入院中、ケータイしか使えない状況で4か月を過ごし、強制的に「ケータイ族」にならざるを得なかったのだが、そこで「ケータイ文化圏」と「ネット文化圏」の違いがわかってきたように思う。 ■ネットユーザーは実は特殊な人種 このブログを見ているような人は、おそらく、PCからアクセスして、ブラウザでウェブサイトを閲覧し、Yahoo!やGoogleを使って検索して自分で調べ物をできる人たちだろうと思う。そして、それくらいのことは当たり前にできることだと思っているかもしれない。 しかし、そういった人たちは、実
53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is. Over the la
ゲームの UI 研究 (2007/10/05＠java-ja)
ゲームの UI 研究＠java-ja onk (大仲 能史) 所属：株式会社ドリコム blog：http://onk.blog.drecom.jp/ twitter：http://twitter.com/onk/ tumblr：http://onk.tumblr.com/ よろしくお願いします ゲームと Web の共通点 大きく2つ マニュアルを読まないユーザ層 ゲームの場合 ゲームセンターをベース としているのが原因 web は…… なんで読まないんだろう？ マニュアルの分厚さ('A`)？ マニュアルを読まなくても 操作が分からなくてはいけない ゲームはホントにこれが上手い 2つめ 長時間の連続操作 これが家電と ゲーム / web との 大きな差 だからこそ ユーザをハメる演出 が必要 この点で ゲームは2歩も3歩も 先を行っている
携帯番号をいれればいいのだな、とすぐわかるインターフェース | SIMPLE*SIMPLE
よく検索キーワードを入れるフォームに虫眼鏡マークがついていたりしますが、携帯番号の場合は次のようなインターフェースがわかりやすいですね。 ↑ これなら迷いません。 いかに迷わずに入力させるか、ちょっとした工夫を凝らしたいところですね。 実際に動作している様子はUmbrella Todayからどうぞ。 » Umbrella Today? 海外のことは知らないのですが、日本の場合はアクセスすると標準で090が表示されているプルダウンにしておいて、そのプルダウンから070、080を選べるようにしておき、その右のエリアに残りの番号を入れさせる方が「携帯の番号を入力するのか」と思ってもらいやすいかもしれないですね。 それと上のスクリーンショットのように、電話番号なのに入力エリアの縦が広いと、何か基本的に複数行にまたがる情報を入れる場所のように見えて個人的にはちょっと不安です。
商品画像の一部をズームできるショッピングサイト | SiMPLE*SiMPLE
JavaScriptでこういう効果を実現するライブラリがありましたが、ショッピングサイトで実装されているのは初めて見たかも。なかなか良いですね。 ↑ 商品画像の上でマウスオーバーすると右に拡大画像が。 LightBoxと同じぐらい普及してくればいいのになぁ、と個人的には思ったり。 実際に動作している様子は以下からどうぞ。 » Pretty Bitter – Stationery that pushes the envelope ■ 関連記事 あらゆるページに拡大鏡を追加できる『Loupe.js』 | SiMPLE*SiMPLE 画像がズームしながら浮かび上がってくる特殊効果 | SiMPLE*SiMPLE 拡大鏡インターフェース | SiMPLE*SiMPLE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソシオメディア | UIデザインパターン
IDEA * IDEA
ユーザビリティ会議レポート：実績があがるサイトの秘訣を探りました | 100SHIKI PR Board
ユーザー視点のウェブデザインガイド コーナーの記事一覧 | Web担当者Forum