「UX Sketch」vol.3 イベントレポート | Recruit Jobs TECHBLOG
2015/08/28にMTL勉強会「UX Sketch」vol.3に参加してきました！ MTL勉強会「UX Sketch」とは「事業計画（経営）」と「UX（デザイン）」をテーマに語られる勉強会です。 ※詳しくはイベントの説明をご覧ください vol.3では「UXデザイナーは様々な能力が求められる」という前提のもと、「何ができれば『優秀なUXデザイナー』と認められるのか？」についてのお話を聞いてきました。 御嶽山「噴火の証言」とFACE MELODYからみるUXデザイン 一番最初にお話されたのは伊藤 大輔さん（面白法人KAYAC - 企画部 ディレクター）です。 伊藤さんは御嶽山「噴火の証言」とFACE MELODYを例にお話をされました。 御嶽山「噴火の証言」では、人々に対して情報をちゃんと伝えるために、もともとは技術よりでインパクトが強く、自由度も高い見せ方にしていたものをfacebook
iPhone最適化サイト構築
Mockapp templateはPowerPoint、Keynote向けにiPhoneアプリやiPhone最適化サイトのモックアップを作るのに適したテンプレートを提供しています。大きさがちょうどiPhoneの大きさになっているので、モックアップのデザインがやりやすいのではないでしょうか。 Keynote向けテンプレート また、もう一つUIライブラリもダウンロードできます。こちらはソフトウェアキーボードやボタンなどにレイアウトされているので、UIと画面のテンプレートを組み合わせれば、iPhoneのイメージをつかみやすいサイトデザインができそうです。 プレゼンテーションを使ってモックアップを作成すると、iPhoneの画面デザインを左側に、その説明書きを右側にして資料を作成することができます。Mockapp templateはiPhoneアプリや最適化サイトを作る際には重宝しそうなソフトウェア
第38回 ユーザ評価の落とし穴 | WIRED VISION
第38回 ユーザ評価の落とし穴 2009年12月16日 （これまでの増井俊之の「界面潮流」はこちら） 人間が利用するシステムを作るときは必ずユーザ評価が必要です。開発の初期段階において客観的な他人の目で見てもらうことにより、問題を早期発見することができますし、全くスジが悪いようであれば最初から考え直すこともできます。少人数のテストユーザに評価してもらうことによって劇的に問題点が減ることが知られています。 完成したシステムについてもユーザ評価は重要です。新しいユーザインタフェースシステムを開発した研究者は、学会で論文を発表することによってそのシステムを世に広めるのが普通ですが、論文を発表するためには、識者による論文査読を通過する必要があります。新規でないシステムや有用でないシステムなど、発表する価値が無いシステムは査読の段階で問題点が指摘され、論文として発表されないようになっています。 この
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」 2009年09月14日- ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。 CSS の記述の単純化 PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。 /* IEのみに適用 */ .ie body { background-color: yellow } /* IE7のみに適用 */ .ie7 body { background-color: orange } /* geckoベースのブラウザのみに適用 */ .gecko body { background-color: gray } 使い方 (1) 必要なPHPファイルをインク
【携帯サイト】もう1ページ先に進んでもらうための６つのテクニック (ユーザビリティ実践メモ)
せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト（ユーザ行動観察調査）を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト（ユーザ行動観察調査）
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
サイト制作に便利なOmniGraffleステンシル : could
UIワイヤーフレーム サイト制作に便利なOmniGraffleステンシル 制作メンバーの体勢やスケジュールによっては HTML でプロトタイプを作ることがありますが、そうでない場合はワイヤーフレームを OmniGraffle で作っています。 OmniGraffle では、オブジェクトを揃えたり調整が簡単ですし、マルチページにも対応しているのでクリックしたら別ページに移動といった効果も作れます。もちろん書き出した PDF もクリック可能なマルチページになっているので、他の方との共有した際もページの遷移がみえやすいです。レイヤーの表示・非表示といったアクションもオブジェクトに充てることが出来るので、ダイナミックなページも表現出来なくはないですが、レイヤーの表示・非表示は PDF に書き出した際になくなってしまうのが残念。Professional版ではプレゼンテーションモードがあるので、出先で
アニメーションするクールなアコーディオンUI実装用JSライブラリ:phpspot開発日誌
Animated JavaScript Accordion V2 - Web Development Blog This lightweight (1.3 KB) animated JavaScript accordion is an update to the original accordion script posted on April 18th.アニメーションするクールなアコーディオン実装用JSライブラリ。 次のようなアコーディオンUIを実装できます。 デモはこちら アニメーションがなめらかでカッコいいです。 関連エントリ Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」
10 Useful Usability Findings and Guidelines — Smashing Magazine
Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability fi
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
モバイルユーザビリティ
ユーザテストにおいて、モバイル機器上でウェブサイトを使用したときのスコアは非常に悪く、特に、モバイル用にデザインされていない「フル」サイトにユーザがアクセスしたとき、悪い評価となった。 Mobile Usability by Jakob Nielsen on July 20, 2009 モバイル利用は多くのウェブサイトが直面している最大のチャレンジの1つである。モバイル利用はイントラネットにとっても重要だが、特に外出の多い従業員を多数抱える企業には重要なものである。 ユーザビリティ調査 モバイル機器上でウェブサイトを使いやすく、あるいは使いにくくしているものは何かを発見するために、我々は以下の3つのユーザビリティメソッドを組み合わせた： ダイアリー調査。6カ国（オーストラリア、オランダ、ルーマニア、シンガポール、イギリス、アメリカ）、14人の参加者に、約1週間自分のモバイル機器で行った、電
OmniGraffleを使ったテンプレート作り
OmniGraffleは、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の２つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。 変数を活用する 書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キャンバスをペー
I ♥ wireframes
Tumblelog managed by Ivana Jurcic, Web Developer from Belgrade, Serbia. If you want to contribute contact me via email, twitter or post your wireframe in this flickr group. Facebook page Submit wireframes Archive RSS feed Adobe Proto Adobe® Proto, a new Adobe Touch App, lets you create interactive wireframes and prototypes of websites and mobile apps on your tablet. Communicate and share ideas wit
知っておきたいUIデザインパターン10選 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Janko Jovanovic氏がSmashing Magazineにおいて10 UI Design Patterns You Should Be Paying Attention Toのタイトルのもと、ユーザインタフェースに関するデザインパターンを紹介している。UIデザインパターンは一般的なユーザインタフェースの問題を解決するためのデザインパターン。繰り返し表れるような一般的な問題に対して効果がある。次のUIデザインパターンが紹介されている。 遅延レジストレーション サービスを使うにあたって最初に登録作業が必要になるのは、ユーザにいらだちを感じさせる。できればユーザ登録作業は必要になるまで遅延させてお
YouTubeでも「ワンダーホイール」利用可能に - 関連検索を視覚化 | ネット | マイコミジャーナル
米Googleが動画サービスYouTubeの検索機能に「ワンダーホイール (Wonder Wheel)」を追加した。 ワンダーホイールは、今年5月にGoogle検索に追加された検索ツールの1つで、検索ワードに関連するキーワードや組み合わせワードを視覚的に辿っていける。 YouTubeでは検索後に、検索結果上部の絞り込み用バーの右端に[Wonder Wheel]が表示される。クリックすると、検索ワードの周囲に関連ワードが配置されたマップが現れる。例えば[iPhone]と検索してワンダーホイールに切り替えると、[iPhone]を真ん中に[iPhone 3G]、[iPhone 3.0]、[BlackBerry Storm]などが広がる。これら関連ワードをクリックすると、マップの中心が入れ替わり、同時に検索結果のビデオリストの内容も変化する。iPhone 3Gの評価に関心があるならば、[iPhon
40+ Helpful Resources On User Interface Design Patterns — Smashing Magazine
If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has - by now - solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniq
AjaxでRSS/OPMLを読み込んでページに表示するツール:phpspot開発日誌
OPod The OPML-Pod is an AJAX OPML and RSS viewer widget that you can embed in any web page you like. OPodはRSS/OPMLを自分のページに簡単に貼り付けることが出来るJavascriptで出来たウィジェットです こんなウィジェットをページに表示できます。 RSSだけでなく、OPMLも取り込めるのが新しいですね。OPMLのカテゴリをクリックするとグリグリ動いてくれます。 OPMLとはお気に入りを標準化したもので、RSSリーダーのお気に入りFeedの一覧を保存しておくのによく使われるXMLフォーマットです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Phenomena Entertainment
IDEA * IDEA
http://gerenuk.crazyphoto.org/2009/06/16/738/