タグ

Designとusabilityに関するmobile_snkのブックマーク (17)

  • フロント・ページ - MarkupDancing

    フロント・ページ 河孝之のウェブサイトです。情報セキュリティから人種差別やタイポグラフィまで、個人としての趣味や関心にかかわるページを全て列挙しています。 https://www.markupdancing.net/ 2020-08-03 14:08:18 2020-08-03 14:08:18 2024-02-19 09:13:47 MarkupDancing,MD,Takayuki Kawamoto,philsci,河孝之 Takayuki Kawamoto, 河孝之 philsci Chief Privacy Officer, 個人情報保護管理者, general manager at department of infromation systems, 情報システム部長 Philosophy of Science Society, Japan: 日科学哲学会 Graduat

    mobile_snk
    mobile_snk 2009/11/27
    アイコンのくだりとか
  • 実用的なユーザビリティの10のポイント:ケーススタディ編

    先日紹介した「実用的なユーザビリティの10のポイント」の中から、コンテンツやフォームやタイポグラフィなどの制作に役立つ実用的なケーススタディを紹介します。 10 Useful Usability Findings and Guidelines 以下の意訳は英語圏内のため、特にタイポグラフィなど日語ではなく英語を想定したデータのためご注意ください。 タイポグラフィ 行間 ÷ フォントのサイズ = 1.48 ウェブサイトの英語フォントでは、一般的に「1.48」が読みやすいです。 クラシックなタイポグラフィのでは一般的に「1.5」が推奨されています。 行幅 ÷ 行間 = 27.8 一つのパラグラフの幅は平均538.64ピクセルです。 多くのウェブサイトのフォントサイズが12, 13ピクセルであることを考えるとかなり長いものとなっています。 パラグラフ間のスペース ÷ 行間 = 0.754 一

  • Webデザイン劇的ビフォーアフター09年春版 (1/4)

    この4月、新しい事業年度のスタートに合わせ、各社のWebサイトが相次いでリニューアルした。ここでは、3月下旬~4月にかけて大規模なリニューアルを実施したWebサイトを編集部でピックアップし、リニューアル前後の画面写真付きで紹介する。最新の企業サイトのトレンドをつかみ、自社サイトのリニューアルの参考にしよう。 マイクロソフトが運営するポータルサイト「MSN」は、2008年4月以来ほぼ1年ぶりにトップページをリニューアル。「毎日使いたくなるMSN」(マイクロソフト)を目指し、使い勝手を高めた。 3カラムのレイアウトは従来のままだが、それぞれのカラムの役割を明確にし、各カラムに入る要素を分類、整理している。具体的には、左カラムにHotmailの受信状況や天気などを確認できる個人ツール類を、中央カラムにニュースなどの最新情報を配置。ディスプレイ広告や企画広告への誘導はすべて右カラムに集約した。 ま

    Webデザイン劇的ビフォーアフター09年春版 (1/4)
  • アイトラッキングから検証した、使いやすいフォームの10のポイント

    Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22~33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ

  • アクセス解析だけでは分からない、サイト上でのユーザー動向を追う「ヒートマップツール」10選(2017年版) - Real Analytics (リアルアナリティクス)

    アクセス解析ツールは非常に多くのデータが取得できて便利なのですが、ユーザーが「どこまでスクロールしたか」「ページのどこをクリックしたのか」「サイトのどこを見ていたか」といった事はわからないツールが大半です。アクセス解析のデータを補完及び補強するという点において、多種多様なヒートマップツールを取り上げてみました。アクセス解析のお供にいかがでしょうか? ご利用上の注意 ・2017年1月に全面改訂しました。 ・画像が見づらい場合はクリックして拡大してください。 ・アルファベット順です。 1.AppSee[有料][日語][インストール型] サイト情報 www.appsee.net 特徴 アプリのヒートマップ分析ツールです。アプリ内で画面ごとにどこをタップしたかを見ることが可能です。またヒートマップ以外にも、利用分析・導線分析・コホート分析、そしてクラッシュレポートなどにも対応しています。無料トラ

    アクセス解析だけでは分からない、サイト上でのユーザー動向を追う「ヒートマップツール」10選(2017年版) - Real Analytics (リアルアナリティクス)
  • フッターサイトマップのデザイン | blog / bookslope

    6 Things To Include for a User Friendly Footer | UX Booth 「Key Footer Information」として、フッターの情報として重要な6つを取り上げています。もうどのウェブサイトを見てもこれらの情報は掲載されていると思いますし、ある意味デフォルト (標準値) であるとも言えます。 フッターに置く重要な要素 About Us Link/リンク (について)Contact Us Link/お問い合わせ (連絡先)Terms of Service/サイトの利用方法 (利用規約)Privacy Policy/プライバシーポリシー (個人情報の取り扱い)Site Map/サイトマップAddress and Phone Number/住所や電話番号 ただし、このうち「サイトマップ」については、単にサイトマップページへのリンクを置くこともそ

    フッターサイトマップのデザイン | blog / bookslope
  • ウェブデザインのクオリティをアップする7つのポイント | コリス

    ウェブデザインのクオリティをアップする7つのポイントをFunction Web Design & Developmentから紹介します。 How to Spot Quality within Web Design: Examples & Tips 以下、その意訳です。 1. Spacing スペースは、デザインされたエレメントの間に使用される巧妙なテクニックです。素晴らしいイメージを配置することも大切ですが、そのエレメントにどのようにスペースを与えるか充分に考慮する必要があります。 充分なスペース

  • http://www.kumaki.net/index.html

    mobile_snk
    mobile_snk 2009/04/14
    ミニマルなデザイン。情報も読みやすい
  • IDEA * IDEA

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

    IDEA * IDEA
  • サイトマップをフッタに配置する際のポイントとその効果

    サイトマップを独立したページとしてではなく、フッタに配置する際のポイントとその効果をWeb Designer Wallから紹介します。 Modern Sitemap and Footer 下記は、その意訳です。 昔はほとんどすべてのウェブサイトで、コンテンツをリストアップしたサイトマップを独立したページとして設置していました。 サイトマップの重要な目的は、ユーザーや検索エンジン(スパイダー)がサイト内の情報を探し出すのに役立つことです。 現在は、多くのモダンなウェブサイトでサイトマップページを設置していません。代わりに、サイトマップをフッタに配置しています。 サイトマップをフッタに設置する効果 クリック数やページビューの増加 ユーザーはページを隅々までじっくり見るわけでなく、スクロールしながらざっと見ることがほとんどです。 そして、多くのユーザーがスクロールして最後に見る場所は、フッタです

  • 愛生会病院

    小坂町へアカシアドライブ 先日、小坂康楽館通りにあるアカシアを見に行ってきました。風が少し強い日でしたが満開のアカシアが花吹雪となり綺麗に舞っていました。噴水の音を聞きながら「風が気持ちいいなぁ」と、景色を眺め、花壇の...

    mobile_snk
    mobile_snk 2009/04/08
    アクセシビリティの反面教師サイト
  • FAQの隠れた役割 (ユーザビリティ実践メモ)

    ユーザから頻繁に問い合わせを受ける質問に対応するため、多くのサイトでは、「Q&A」や「よくあるご質問」といったFAQ(Frequently Asked Questions)コンテンツを用意しています。 今回はFAQを効果的に活用する見せ方について考えていきます。 FAQはユーザが持つ疑問の解決につながりますが、ユーザはサイトを利用するなかで、FAQをそれほど意識して探しにはいかないことに注意が必要です。 では、FAQはページのどこに配置するのがよいでしょうか。 ヘッダーエリアか、左右のナビゲーションにFAQのリンクが配置されているパターンを思い浮かべる方が多いでしょう。(図1) ユーザは、コンテンツエリアを中心に見ていくため、意識的に探さないとFAQがあることに気付きません。 サイトの共通要素として、問い合わせなどと同様、どのページにも同じ位置に配置すべきですが、それに加えて、コンテンツを

    mobile_snk
    mobile_snk 2008/08/06
    >窓口への問い合わせ数を減らす守りのコンテンツだけではなく、ユーザをサイトのゴールへと導く攻めのコンテンツとしての役割を担うことも可能になるのです。
  • Clear Sky Source - line-height はどの位つけましょうか?

    コバの備忘録たまーに、当にたまーにではありますが、複数人で話しているときに、line-height はどの位にしましょうか?という話題が出ることがあります。だいたいそんな時は各々が自分の考えを言って、それで終わってしまっていましたので、今回、ちょこっとのサイトでどんな指定をしているのか調べてみました。 (ちなみに今回調べるのに参考にしたサイトは、Web のフロントエンドで飯をう方であれば概ね知っていたり、有名だったり、またアクセシビリティというかユーザビリティなんかも考えていらっしゃって、文字の読みやすさなんかにも気を使っているのだろうと思われるサイトです。 また、調べたページは、主に、ある程度文章量があるページを参考にしています。) インフォアクシア 言わずと知れたアクセシビリティにおける日山。 「実践ノウハウページ」では、1.3emが指定されています。 富士通 こちらもま

  • Googleが実践するユーザーエクスペリエンス10箇条

    Googleの会社情報に「Google User Experience」がリリースされました。 Google User Experience Googleのユーザーエクスペリエンス10箇条の意訳を紹介します。 Focus on people – their lives, their work, their dreams. Googleユーザーエクスペリエンスチームは、世界の人々の生活、仕事、夢にフォーカスします。私たちのゴールは人々の生活を改善することです。 Every millisecond counts. スリムなコード、慎重にセレクトされた画像などGoogleのページは、素早くロードするように設計されています。そして、不必要なクリック、タイピング、ステップなどは削除して設計しています。 スピードはユーザーに恩恵を与えます。 Simplicity is powerful. シンプルとい

    Googleが実践するユーザーエクスペリエンス10箇条
    mobile_snk
    mobile_snk 2008/04/28
    サイトデザインやユーザビリティの基本的な考え方の参考になる
  • 逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)

    cat888 live เว็บไซต์ของเราได้รับการรับรองว่าเป็นเว็บพนันที่มีคุณภาพเยี่ยมที่สุดในประเทศไทยสำหรับการพนันออนไลน์ เว็บพนันที่มั่นคงและปลอดภัยที่สุดสำหรับการเดิมพันออนไลน์ที่ทำการเงินอย่างมั่นคงและปลอดภัยและรับรองความเป็นส่วนตัวของคุณในการเล่นเกมพนันที่นี่. ทางเรามุ่งเน้นให้ประสบการณ์การพนันออนไลน์ที่ไม่ซ้ำซากและน่าสนุกที่สุดเลยค่ะ! cat888 หวย เมื่อคุณมีความระมัดระวังในการพนันออนไลน์ คุณจะมั่นใจได้ว่า

  • personadesign.net - このウェブサイトは販売用です! - personadesign リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

    mobile_snk
    mobile_snk 2008/04/16
    ペルソナの定義、ペルソナの作り方、webへの応用など
  • ウノウラボ Unoh Labs: Webデザインの「カン」を養うためにしたら面白いかもしれないこと

    こんにちは。yamazakiです。今回はちょっと趣向を変えて、技術や手法ではなくて、デザイナとしての「カン」を養うために個人的にやっていること、やったらいいと思うことを簡単にまとめてみました。 左利きになったつもりで、左手をメインに使う生活をしてみる 例えば駅の改札口で、切符を入れるところはなぜあの位置にあるのか、自動販売機の硬貨投入口はなぜあの位置なのか。カメラのボタンの位置はなぜあの位置なのか。普段何気なく使っているものにもやはり「そうしたほうがよい理由」が潜んでいます。その「理由」を発見する上では、マイノリティの立場になってみると面白いです(海外に行くと逆に日のことがよくわかる、というのと同じようなものかもしれません) というわけで、簡単なところで、左利きになったつもりになって行動をしてみると色々な発見、気づきがあります。 何かを買ったら取扱説明書を見ずにどこまで使いこなせるか試

  • 1