タグ

ユーザビリティに関するx_posのブックマーク (45)

  • スマホUI考(番外編) UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict

    いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か? ビッグオー駆動開発は、正式には『OKAN Driven Development(オカン駆動型開発)』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト

  • iOS ヒューマンインターフェースの原則 - Qiita

    はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想

    iOS ヒューマンインターフェースの原則 - Qiita
  • 今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

    みなさん、入力フォームを制作する際、どのような施策をおこなっていますか? 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chromeデスクトッ

    今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
  • 国立大阪医療センター、救急治療を数秒間隔で記録できるER経過記録システムを開発

    国立病院機構 大阪医療センターの救命救急センターは、数秒間隔で処置・経過の記録を実現するER経過記録システムを構築・運用している。救急現場での経過記録には通常、紙の記録票が用いられ、システム化を試みるところは少ない。FileMakerで構築された同システムは、切迫した状況で行われる救急治療を妨げることなく、正確で迅速な経過記録が可能だという。 ER経過記録のシステム化にチャレンジ 国立病院機構大阪医療センターの救命救急センターは三次救急に対応した施設で、主として外傷、急性中毒、熱傷、心肺停止、ショック、臓器不全など重症救急患者の診療を行っている。また、政策医療の1つである災害医療を担い、地域診療支援体制の充実や医療情報ネットワークへの参画、災害訓練の継続的実施などを通じて局地および広域災害に対応する西日の災害拠点病院でもある。13人の救急科専従医師を擁し、年間200症例前後の病院外心停止

    国立大阪医療センター、救急治療を数秒間隔で記録できるER経過記録システムを開発
  • ตรวจหวยแบบตัวเลข ตรวจ ผล รางวัล สลากกินแบ่ง รัฐบาล2021

    ตรวจหวยแบบตัวเลข ตรวจหวยกรอกตัวเลข รวดเร็วทันใจ ตรวจลอตเตอรี่ใส่ตัวเลขรองรับปุ่ม ตรวจหวยแบบตัวเลข เลขเด็ดหวย งวดนี้ หวยดัง หวยเด็ด ตรวจหวยแบบตัวเลข ผลสลาก ตรวจลอตเตอรี่ ตรวจหวยไทยรัฐ ตรวจหวยแบบกรอกตัวเลข ตรวจหวยรางวัลที่ 1 รางวัลเลขท้าย 2 ตัว ตรวจหวยออนไลน์ ร่วมตรวจผลสลากกินแบ่งรัฐบาลกับเรา “ตรวจหวย” ซึ่งได้รวบรวมข้อมูลผลรางวัล ผลสลากกินแบ่งรัฐบาล ตรวจหวยงวดนี้ หุ้นไทยช่อง9 ในงวดปัจจุบันและย้อนหลั

  • ブラウザにやさしいHTML/CSS

    1. HTML/CSS 〜 「お・も・て・な・し」をブラウザにも 〜 TAKEHARU IGARI Front-end Engineer / Evangelist ブラウザにやさしい <html5j パフォーマンス部 第⼀回勉強会 /> 2. プロフィール • TAKEHARU IGARI 猪狩 丈治 - 所属 • 株式会社 Lei Hauʼoli フロントエンドエンジニア - 略歴 • 表⽰速度、保守性、ブランディング、SEOを考慮したフロントエンドエンジニアリングを得意とし、 現在、各ナショナルクライアントのプロジェクトや、株式会社リクルートの主要サービスのフロント エンド開発に携わり、⾼速化コンサルティングも⾏う。 - 執筆 • 技術評論社「WEB+DB PRESS」 • Vol.66 〜我流コードからの卒業HTML構造化指南 • Vol.59 〜「Webサイト超⾼速化実況中継 ──

    ブラウザにやさしいHTML/CSS
  • ナビゲーション/メニューのiPhoneアプリデザイン集22選

    FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

    ナビゲーション/メニューのiPhoneアプリデザイン集22選
  • B to Bサイトでのビジネスリード獲得方法 (ユーザビリティ実践メモ)

    B to B向けの製品・サービス紹介サイトでは資料請求・問合せをビジネスゴールに設定しているケースが少なくありません。 今回はB to B向けサイトで資料請求数を効果的に増やす方法として以下の2つを紹介します。 (1)全てのページで資料請求への導線を設置する (2)ユーザの求める情報を具体的に提示する しかしB to BサイトはB to Cと比べて、訪問ユーザは製品・サービスに対して一定の興味を持っているため、そうした懸念は杞憂であると考えられます。逆に全てのページに資料請求への導線を設置していない場合、ユーザが何のアクションも起こさないままサイトから立ち去るリスクが高まります。 弊社の調査でも、あるページで欲しい情報を獲得したあと、そのページに資料請求への導線がなかったため、そのままサイトから立ち去るというユーザ行動が確認されています。 (2)ユーザの求める情報を具体的に提示する B t

  • alt属性が空なら、CSSで背景画像として扱うべきなの? - Trans

    Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね?のはてブコメントで何名かの方が「alt属性が空ならCSS指定」というような意見があったので、そのへんのお話。 きっかけ 上記エントリーでは実際に視覚障害者からの一つの意見としてこういう考え方もあるんだよ、ということを紹介しました。 ただ、何名かの方からはてブで「alt属性が空ならCSSで指定」、もしくは「空のalt属性はあまり増やしたくない」というコメントがちらほら見受けられました。 またもや西村あさひ法律事務所より その一方で、西村あさひ法律事務所のソースを読んでいると、次のようなコードが出現することが分かります。 <ul id="endof-content-area"> <li> <a href="#header-area" class="rollover">ページの先頭へ戻る <img src="/common

    alt属性が空なら、CSSで背景画像として扱うべきなの? - Trans
  • ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan

    シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書

    ユーザーにとってはUIがすべて:UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
  • 『こんなwebサイトは嫌だベスト20』をチェックシート化して現場に持っていこうと考えてPDF形式で作った

    自分が言うのではなくランキングと言うところに魅力 制作者自身が、『いや・・・確かにフルFLASHは見栄えがいいんですが・・・』というのと、アンケート結果として『ユーザーはこう考えていますよ!』と言うのでは、説得力が違うのは当然です。 そんなわけで、このランキングを印刷して現場に持ち歩けば、あなたの説得力も上がるというものではないかと考えて、PDFにしました。 引用元の表記、Goo調べという表記を付け足して、チェックシート化したものです。 また、それぞれユーザーが『不満を抱きそうな項目』にポイントをつけたバージョンも付け足しました。 こちらの項目には、やっぱり不満度の基準は『誰が言ったのか』が重要かもしれないので、『ネタ帳』を表示してます。 自分の言葉はここにないよ!というアピールのために必要かと。 ネタ帳いらねーと思ったら表記無しのほうをダウンロードしてください。 あとベスト20と書いてあ

    『こんなwebサイトは嫌だベスト20』をチェックシート化して現場に持っていこうと考えてPDF形式で作った
  • 効果倍増! アクセス解析から見直す「企業情報」のあり方 | 基本編

    一般的な「企業情報」コンテンツは これが最終型なのだろうか?「企業情報」は、ウェブではごく一般的なコンテンツだが、実際のサイトの姿となると幅が広い。 会社概要沿革組織事業所一覧(交通アクセス)などが標準的なコンテンツだが、業種や取引先、企業規模によっては、次のような情報まで掲載しているサイトも少なくない。 社長の挨拶ニュースリリースCM情報/イベント情報採用情報投資家情報社会/環境活動(CSR)調達情報これらの外国語版いずれにしても、根幹をなす会社概要や沿革については、多くのサイトが堅い印象に仕上げているようだ。 また、米国のサイトの企業情報と比較してみると、日の企業情報に少ないものに「mission(使命)」がある。日では「社長ご挨拶」が代わりの役割を果たしているのかもしれない。「沿革」にあたる「history」も長い文章になっていることが結構多く、英語が不得意な人にはくたびれるサイ

    効果倍増! アクセス解析から見直す「企業情報」のあり方 | 基本編
  • フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント

    &amp;lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;amp;pid=877160106″&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;noscript&amp;gt;&amp;lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;amp;pid=877160106″ target=”_blank” &amp;gt;&amp;lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;amp;pid

  • マウスの軌跡をそのまま記録してくれる『RobotReplay』を試してみた! | POP*POP

    先日から話題になっていたRobotReplayがようやく安定してきたようなのでちょっと試してみました。これはかなりいいですよ。 ただ、大勢のヒトが使うとまた不安定になりそうなので紹介するのが微妙ですが、そこはRobotReplayの中のヒトにがんばってもらいましょう。 以下に使い方をご紹介。かなり興奮しちゃいますよ。 ↑ まずは会員登録。この手のサービスは招待制が多いのですが、今はフツーに登録できるようです。 ↑ メールで認証などのプロセスを経てこの画面へ。スクリプトタグを埋め込み、サイトを登録すれば解析開始です。 ↑ 10分程度待つとこのようにセッションが一覧できるようになります。おもむろに「プレイ」をクリック。 ↑ YouTubeで撮ってみました。なんだか見知らぬ読者とぐっと身近になれたようで嬉しい!マウスの軌跡どころか、クリックしたところもわかりますね。 また、フォームに何を埋めたか

    マウスの軌跡をそのまま記録してくれる『RobotReplay』を試してみた! | POP*POP
  • たった6行でWebサイトのUIをガラッと変える

    「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、や雑誌をめくるような感覚で、Webページの文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、

    たった6行でWebサイトのUIをガラッと変える
    x_pos
    x_pos 2008/06/16
    開きすぎたタブのせいでクライアント領域が狭くなったPCだと上下のスクロールが発生して最悪の結果に。会社のノートPCだとXGAだからなぁ…。
  • ソフトウェア紹介ページでの画像の使い方 (ユーザビリティ実践メモ)

    ECサイトで、商品写真を積極的に使ってユーザの購買意欲を高める手法について、これまで何回か取り上げてきました。 実際の大きさがイメージできる商品写真を置こう写真で魅せる商品紹介 今回は、ソフトウェアやWebサービスなど、形のない商品を紹介するページにおいてユーザの意欲を高める方法を考えます。 通常このようなページでは、商品・サービスのメリットやしくみ(操作手順)を以下のような方法で訴求することになります。 文章のみで説明図+文章で説明実際の操作画面のキャプチャを表示 弊社のユーザ行動観察調査で、上記の3パターンのページを見せ、反応を観察したところ、 文章のみ→ほとんど読まれない(スクロールもせずに別のページに移ってしまう) 図+文章→視線が止まり、図の表す意味について考え始める。場合によってはそこで閲覧を止めてしまう 画面キャプチャ→画像を確認しつつ、次々と読み進めていく という傾向が見ら

    x_pos
    x_pos 2008/06/16
    ニッチな業種アプリケーションだと、競合他社のパクリを恐れて画面イメージを出したがらない事が多い。特に法制度にしばられたアプリは大きな差別化ができないからね。
  • ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく

    ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。

  • 逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)

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

  • 会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ!

    エントリは、20〜40代PCをある程度使いこなしているユーザー向けの会員登録フォームの設計について述べたものである。ケータイサイトは含まないし、シニアも対象としていない。シニア向けUIについては(古いエントリだが)こちら "ユーザーID"と"メールアドレス" 減ってはきたものの、ユーザーIDとメールアドレスの両方を取るWebサービスがいまだに結構ある(ex. Remember the milk)。はてなYahooAuctionのように「ユーザーIDがニックネームに相当するコミュニティサイト」は除くとして、ユーザーIDを一般客に公開しないにも関わらずIDとメルアドの両方を取る意図がわからない。 ユーザーIDとしてメールアドレスを使うメリットは 会員登録フォームの入力必須箇所が1個減る 好みのIDが取れない事件が防げる "ID忘れ"による機会損失/幽霊会員が減る 流石に自分のメアドは忘れ

    会員登録の敷居を下げる入力フォームの作り方(PC編) - キャズムを超えろ!
  • 第13回 Webページで読みやすいテキストとは:ITpro

    今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは,活字印刷物のフォントとは違い,横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので,やはり横書きでは読みづらいようになっています。 日人が苦痛を感じることなく読める横書き1行あたりの字数は20字+α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙,つまりのサイズがA4を超えるような大判になると,1ページを左右2段組に分けて25~28字程度に調整されています。 一方,縦書きの場合には識別許容量はグンと増加し

    第13回 Webページで読みやすいテキストとは:ITpro