転職・退職代行マガジン -「適応障害になってしまって退職をしたい…。でもこれってただの逃げなのかな」 適応障害は人によって症状が違うため、なかなか周りに理解がされにくく、苦しいですよね。 「このまま仕事を続けられそうに…
Design Strategies for Brand Landing Pages on Mobile Devices :: UXmatters
On the desktop Web, ecommerce landing pages get a bum rap—sometimes well deserved. Laden with ads and gimmicks, pushing items with higher markups, and confusing customers with complicated information architectures, these marketing monstrosities typically strongly underperform the search results pages from a simple keyword search. However, passing a death sentence on all landing pages may be premat
ウェブサイトでよく利用されるUIの特徴や使い方を解説した -Patternry
最近のウェブサイトでよく見かけるUIのデザインパターンをコレクションし、その特徴や使い方・注意点を解説したサイトを紹介します。
カンタン！効果的なユーザビリティテストについて : LINE Corporation ディレクターブログ
こんにちは！コンシューマメディア部ディレクター浪越です。 制作ディレクターとして、サイトの改修に着手することがありますが、その際どうやって改善点を見つけるかがいつも問題になります。 色々なサイトを見て便利な機能を探して、改修に取り入れることができないかを考えることはとても重要です。 しかし、もっと問題解決に効果的な方法はないのか…。グループインタビューやユーザビリティテストなど、簡単にできればいいのに…。と思うディレクターさんもいらっしゃるのではないでしょうか。 実はユーザビリティテストであれば、テストするユーザーも含め、3人いれば実施が可能なのです。 今回は、簡単にできるユーザビリティテストの方法をご紹介いたします！ グループインタビューとユーザビリティテストの違い まずは、混同されがちなグループインタビューとユーザビリティテストの違いをまとめます。 グループインタビュー 【目的】 人間
初心者でも使えるサポートページの作り方 (ユーザビリティ実践メモ)
お問い合わせコストを節約するため、ウェブサイトに「よくあるご質問」や「アフターサービス情報」等を豊富に掲載して、ユーザの自己解決を促すケースが多くなってきています。 一方で、インターネットに不慣れなユーザ（以下：初心者）が利用するにはハードルが高いサポートページも多く存在します。 今回は、特に初心者向けにサポート情報を提供する際のポイントをご紹介します。 サポート情報を提供する上で最も重要なことは、ユーザが目的の情報にスムーズにアクセスできるようにすることです。そこでサポートページでは、「一本道で目的の情報にたどり着ける」ように導線設計をすることが重要です。 一般的には、「商品カテゴリから探す」、「型番から探す」、「よくあるご質問から探す」など、色々な探し方が出来たほうが、ユーザビリティーが高い傾向があります。しかしこの一般則は、初心者がサポートページを利用する場合には必ずしも当てはまりま
左ナビと右ナビはどっちが良い？ (ユーザビリティ実践メモ)
ウェブサイトを設計する際に、ナビゲーションメニューを左右のどちらに設置するかで悩んだ経験はありませんか？ 弊社でウェブサイトを設計する際には、「コンテンツ」と「ナビゲーションによる誘導」のいずれが大事かによって設置位置を判断しています。 ■ナビゲーションによる誘導が重要な場合はナビゲーションを左に 例えばアマゾンなどの巨大ECサイトではナビゲーションによる誘導が重要であるため、ナビゲーションが画面から切れてしまうことのないよう、左側にナビゲーション設置しています。 上記のほかの考え方として、ユーザがそのサイトと同時に利用する競合サイトと同じ位置にナビゲーションを設置する、という考え方もあります（ユーザの慣れや先入観に配慮する）。 ナビゲーション設置時には「コンテンツ」と「誘導」のいずれが大事なのかによって設置位置を調整するようにしましょう。
ユーザの視線に配慮したページ作り：「表」編 (ユーザビリティ実践メモ)
弊社のユーザ行動観察調査では、アイトラッキング（ユーザの視線分析）を利用していますが、ある程度ユーザ理解があれば、「認知的ウォークスルー」（ユーザになりきってそのサイトを検証する）という手法でも、視線の流れを意識したサイト評価・設計ができるようになります。 今回はWebページ内の表のつくり方を例に、「視線を意識したサイト設計」のヒントをご紹介しましょう。 このニュース一覧は、ぱっと見はきれいなのですが、実際にはユーザの情報収集を妨げています。その理由がわかるでしょうか？ この例の場合、ユーザはまず文頭を見て自分に必要な情報を探すのに対し、文章が中央ぞろえになっているため、視線を左右に動かす必要があり、情報収集の効率を下げています。 そこで、文頭を左寄せにすることで視線がスムーズに流れ、表が読みやすくなります。 ただし、左寄せが万能なわけではありません。次の例をご覧ください。 いかがでしょう
フォームでのちょっとした配慮の例 (ユーザビリティ実践メモ)
フォーム設計のポイントについては、実践メモでも何度もご紹介してきました。 フォーム設計についての記事一覧 今回は、ECサイトの「配送日時」を例にとって、フォームの改善ポイントをご紹介します。 一見普通のフォームですが、実際にユーザ行動観察調査を行ってみると、何人ものユーザが混乱する様子が観察されました。どのような問題が起こったのでしょうか？ 調査では、次のようなことが起こりました。 「配送日時は1週間以内をご指定ください」という注記の存在に気付かず、1週間以降の月日を入力してしまった。 「2月8日」と入力したが、実際に指定できるのは2月7日までだった。 翌週の水曜日で指定したかったが何日か分からずに、手元の手帳でカレンダーを確認しようとした。 開発側の視点では、「1週間以内とちゃんと明記しているのに・・・」「曜日なんて考えるまでもない」と思ってしまいがちです。 もちろん何の問題もなく使いこ
とても洗練されたＵＩの日付ピッカー＆カレンダー集:phpspot開発日誌
Beautiful datepickers and calendars for web developers とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。 日付入力も便利だけでなく、クールに行えます。 datepicker シンプルだけどクールなカレンダー jquery datepicker From〜Toが指定できるカレンダー Calendar 立体的でクールなＵＩ jPint iPhoneっぽいＵＩ 全部見る たくさんありすぎて迷いますが、サイトのＵＩや、用途に応じて使い分ければ便利そうですね。 関連エントリ 超クールなカレンダー型日付入力補助用JSライブラリ カレンダー、バルーンなどWEBアプリに使えるハイクオリティアイコンセット「pinvoke」 日付入力を便利にするカレンダー/日付ピッカー集
ページ作りに欠かせない便利なコントロールがまとまったページ:phpspot開発日誌
30 Essential Controls ページ作りに欠かせない便利なコントロールがまとまったページが紹介されています。 自動キーワードサジェスト、カルーセル、グラフ、パネル、アコーディオンといった３０種類にもわたる基本的なコントロール、それぞれにおいて、何を使えば実装できるのか？をまとめられていて便利です。 例えば、自動キーワードサジェストで言えば、 Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight で使えるよ、といったことがまとめられてます。 FlexやSilverlightといった、JavaScript以外の要素も入っている点に注意ですが、この早見表で、これとこ
FirefoxまとめサイトのPukiwikiスキン “White flow” - Liner Note
FirefoxまとめサイトのPukiwikiスキン “White flow” 書いた人： hash 投稿日： 2007年03月03日（最終更新：5年5ヶ月と29日前） 読者の皆さんの反応 61 被ブックマーク数： 47 要約：Firefox まとめサイトで使用しているスキンを汎用のスキンとして公開してみます コレは何? Mozilla Firefox まとめサイトはPukiwiki Plus!でできているのですが、無料 Wiki レンタルサービスのWikisというサイトを運営されている方から、前記事で公開してほしいとご相談を受けましたので、汎用に利用できるように手を加えて公開しておこうと思います。 名前は”White flow”とでもしておきましょうか（てきとう） 見た目はこんな感じです（リンク先はデモサイト、内容の編集機能は止めています）。 現時点での最新版PukiWiki 1.4.7_
5ヶ月で1千万円売り上げたAIR アプリ：Balsamiq | thebadtiming.com
ウェブサイトのワイヤーフレームを作る AIR アプリケーション、Balsamiq。Adobe Connect Now のプロダクトマネージャだった Giacomo Guilizzoni (通称 Peldi) が一人でやっているベンチャー。ベンチャーキャピタルからの出資ももちろん無し。2008年6月に会社を立ち上げ、Blog と口コミだけで 5週間で$10,000（約100万円）、5ヶ月で $100,000（約1,000万円）を売り上げたことでも話題になり、NYT のプロダクトレビューでも取り上げられたりました（Man Writes Software, Blogs About it, Makes $100k in 5 Months ）。 手書きのイメージをそのまま UI に使っているところなど素朴な感じで、手作り感満載。ナプキンの裏を使ってモックアップを作るような手軽さ、気軽さを実現したシン
タグクラウドにうまく階層を付けたＵＩ例とサンプル:phpspot開発日誌
jquery Hover Sub Tag Cloud タグクラウドにうまく階層を付けたＵＩ例とサンプル。 タグクラウドが多くなってくると、見にくくて困ったりしますが、次のようなＵＩになると見やすさが飛躍的に上がります。 デモページ なるほど、誰もが思いつきそうで思いつかなかったＵＩかもしれません。 ソースコードもダウンロード可能なので、参考に実装してみるとよいかもしれませんね。
リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集:phpspot開発日誌
45 New jQuery Techniques For Good User Experience | Developer's Toolbox | Smashing Magazine リッチで使いやすいＵＩを作成するためのjQueryライブラリ＆サンプル集。 JSフレームワークはもうjQueryの時代だと言わんばかりの豊富かつ有用なサンプルが多数掲載されています。 Build A Login Form With jQuery Spoiler Revealer with jQuery AJAX Upload FCBKcomplete Create Accessible Charts Using Canvas and jQuery Radio Button and Check Box Replacement Submit a Form without a Page Refresh jQuery
Web上で使えるユーザビリティテスト - everything might happen tomorrow - yhassy - builder by ZDNet Japan
ハイブリッドクラウドとAI これからの時代のデジタルビジネスを支える IBMの新たなビジネス＆パートナー戦略 DX時代のアプリケーションセキュリティ 未来革新プロジェクトに邁進するSOMPO 基幹システムのモダナイゼーションに迫る ネットワークもサービスとして使う いま企業ネットワークが受ける大きな制約 クラウドシフトで大きく変わる！ デジタルを当たり前と言えるか？ 現状を非効率を変える機会と捉え行動する これが今、成長できる企業の共通項 リモート、オフィス、オンサイト 働く場所を選ばないハイブリッドワーク これからの快適な業務環境構築のポイント 特集：IT最適化への道 成功の秘訣をその道のプロが解説 カギとなるのはシステムの「見える化」 部分最適だけではダメ DX実現のための最初の一歩 業務プロセスのデジタル化をサポート 連載！プロが語るストレージ戦略 第二回：DX時代のデータ活用とデー
覚え書き@kazuhi.to: そろそろSFCのWebサイトリニューアルについて一言（遅
そろそろSFCのWebサイトリニューアルについて一言（遅 言っておこうかと。まぁ、この件に関してはわずか一日の間にもそこかしこで言及され、既にSFCのWebサイトのトップページはFlash版とHTML版のいずれかを選択させるものに変更されているし（中の人は大変お疲れ様でした）、激しく今更ではあるのですが。話の発端と言うか経緯をご存知ない方は、以下のリンク先を参照していただければと。 Geekなぺーじ : これはひどい 慶應大学湘南藤沢キャンパス(SFC)のリニューアルWeb SFCのサイトリニューアルの件について | Fumihiro Kato / 加藤 文彦 それまでに確保していたアクセシビリティを完全に無に帰してまでも、フルFlashオンリーなコンテンツで再構築したほうが、SFCのターゲットユーザーにはより訴求できるのだ……という考え方が背景にあってのリニューアルと仮定するにせよ、やは
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
画面横幅を900px以上にするメリットとデメリット。右端が欠けることに注意 (ユーザビリティ実践メモ)
Yahoo! JAPANの画面横幅が950pxになって以降、サイトの画面横幅を770pxから900px以上に拡大するサイトが増えています。 今回は画面横幅を900px以上に拡大することのメリット・デメリットから、画面サイズを広げる際に注意すべきポイントをご紹介します。 【メリット１】 ファーストビューで表示できる情報が増える メディアサイトなど広告収入を目的としているサイトの場合、ファーストビューに表示できる広告の量が増えますので、売上増加に直接結びつきます。 【メリット２】 デザインが映える トップページのブランドパネル等の横幅が広くなり、迫力のあるデザインを表現できます。 一方、デメリットとして、大きく下記の3点が挙げられます。 【デメリット１】 右端が欠けて見られなくなるケースがある（特にお気に入り常駐時） 画面右エリアに重要なボタン（購入ボタン、申込ボタンなど）や重要なリンク(メイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mobile Patterns - UI UX Inspirational Gallery for iOS and Android
ユーザビリティのテスティングツール１０個:phpspot開発日誌