タグ

ユーザビリティとUIに関するgoto553のブックマーク (12)

  • スマートフォンサイト運用と今後のスマートフォン市場の展望 : LINE Corporation ディレクターブログ

    スマートフォングループの藤村です。2か月前まで、モバイルで、livedoorトップ・デコメサイトの運用を担当していました。 10月から新しい部署のスマートフォングループに所属し、すでに、スマートフォン版のlivedoorトップ&ニュース他の運用を開始しています。実際に運用してみると、モバイルとの共通性が多く、モバイルサイトの運用経験が生きる領域だと実感しました。 まだまだ運用の初期フェーズの段階ですが、今回は、実際にスマートフォンサイトを運用してみて気づいた点及び、今後のスマートフォン市場の展開予想について書いてみようと思います。 ファーストビューの重要性 スマートフォンのサイトを運用してみて、まず一番最初に改修を入れたのが、ファーストビューです。ファーストビューとはユーザーがモバイル端末でアクセスして、一番最初に表示される画面のことを言います。 モバイルサイト運用経験者の方には常識かと思

    スマートフォンサイト運用と今後のスマートフォン市場の展望 : LINE Corporation ディレクターブログ
  • ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips

    miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト(ラベル)が付けられますが、input要素だけでマークアップした場合、チェックボックス(ラジオボタン)の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ

  • 入力フォームのユーザビリティ&アクセシビリティ

    入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス

  • Webユーザインターフェースの "暗黙知" を意識していますか? : LINE Corporation ディレクターブログ

    暗黙知(あんもくち、Tacit Knowing)は、ハンガリーの哲学者・社会学者マイケル・ポランニー(Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、(全体的・部分的に)言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基的なところだけ

    Webユーザインターフェースの "暗黙知" を意識していますか? : LINE Corporation ディレクターブログ
  • やってしまいがちなユーザビリティのミスとその解決方法

    ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手

  • 各種ブラウザでの互換性を検証できる編集ツール「Pirka'r」,IPAがOSSとして正式公開

    独立行政法人 情報処理推進機構(IPA)は2009年9月30日,コンテンツをさまざまなWebブラウザで閲覧した際の互換性向上を支援するツール「Pirka'r」(ピリカル)を,オープンソース・ソフトウエアとして正式公開した。互換性を検証や,コンテンツ編集機能を備える。 Pirika'rは以下のような機能を持つ。HTMLCSSJavaScriptを検証し,ブラウザに依存する記述がないかどうかを検証する「ブラウザ互換性チェック機能」。コンテンツがFirefox, Internet Explorer, Safariでどう表示されるかを,1画面に並べて表示する「マルチブラウザビュー機能」。また,コード補完や,シンタックス・ハイライト,構文チェックが可能なHTML/CSS/JavaScriptのエディタを備えており,指定したURLのコンテンツをディレクトリ構造を保ったままダウンロードし編集できる。

    各種ブラウザでの互換性を検証できる編集ツール「Pirka'r」,IPAがOSSとして正式公開
  • 実用的なユーザビリティの10のポイント:ガイドライン編 | コリス

    ユーザーにあなたのウェブページを容易で、そして楽しくアクセスできるようにする実用的なユーザビリティの10のポイント(ガイドライン編)をSmashing Magazineから紹介します。 Tumblr 多くのフォームは2カラムのレイアウトを採用し、ラベルはフィールドの左に配置されています。一見よさそうに思えますが、これは採用すべきではありません。 なぜなら、フォームは一般に垂直に方向付けがされているためです。ユーザーが左→右→左下と視線を動かすことより、上→下と移動する方が容易です。 また、ラベルを左に配置することはもう一つの問題があります。 あなたはラベルを右揃えと左揃えのどちらで配置しますか? 左揃えはラベルを読みやすくしますが、どのフィールドのラベルか判断するのが難しい場合があります。 右揃えはその逆です。フィールドのラベルを判断するのは容易ですが、ラベルを俯瞰するのが困難です。 2.

  • 既存のデザインのクオリティをアップする8つのポイント

    デザインが単調な感じのときには、使用している色を鮮やかにしてみます。 変更した色をベースに、カラースキームを設計します。 Color Scheme Designer 3 2. モノクロは慎重に ブラックやホワイトなどモノクロをテーマにした素晴らしいデザインのウェブサイトは多数あります。モノクロは単色で構成されたものですが、一色加えることでデザインが容易になることがあります。 ポイントはその一色のみにこだわらずに、他の色も充分に検討することです。 3. グリッド レイアウトの活用

  • 知っておきたい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デザインパターンが紹介されている。 遅延レジストレーション サービスを使うにあたって最初に登録作業が必要になるのは、ユーザにいらだちを感じさせる。できればユーザ登録作業は必要になるまで遅延させてお

  • ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips

    ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル(label)やボタン(button)に、クリック可能であることが分かるようにスタイルシートで設定します。 例: <textarea name="code" class="css" cols="60" rows="5"> label, butto

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • 優れたユーザインタフェースを設計する際に考慮する8つのポイント

    ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが

  • 1